For example I have this <div> with the following CSS:
.some-div{
position: relative;
top: 50px;
}
<div class="some-div">
<p>Some content</p>
</div>
How do I get the CSS property position of the element with JavaScript (which in this example should result in the string "relative")?
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain
const element = document.getElementById('your_element_id');
const computedStyles = getComputedStyle(element);
const position = computedStyles.position;
Assuming your "class" has only one element:
HTML
<div class="some-div"">
<p>Some text</p>
</div>
JAVASCRIPT
let someDiv = document.getElementsByClassName('some-div')[0];
someDiv.addEventListener('click', () => {
console.log(this.getComputedStyle(someDiv).getPropertyValue('position'));
});
var element = document.querySelector('.some-div');
var style = window.getComputedStyle(element);
var pos = style.position;
console.log(pos);
Try this. The Console output must be: "relative"
positionCSS property value,"relative"in this example.