使用JavaScript获取元素的CSS位置属性

Question

例如，我有这个<div>与以下CSS:

.some-div{
position: relative;
top: 50px;
}

<div class="some-div">
<p>Some content</p>
</div>

我如何获得元素的CSS属性position与JavaScript(在这个例子中应该导致字符串"relative")?

Answer 1

windows . getcomputedstyle ()

Window.getComputedStyle()方法返回一个对象，该对象包含元素的所有CSS属性值，在应用活动样式表并解析任何基本计算之后，这些值可能包含

const element = document.getElementById('your_element_id');
const computedStyles = getComputedStyle(element);
const position = computedStyles.position;

Answer 2

假设你的"只有一个元素:

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'));
});

Answer 3

var element = document.querySelector('.some-div');
var style = window.getComputedStyle(element);
var pos = style.position;
console.log(pos);

试试这个。控制台输出必须为:"relative">