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

Question

例如，我有<div>以下 CSS：

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

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

如何使用positionJavaScript 获取元素的 CSS 属性（在本例中应生成 string "relative"）？

Answer 1

Window.getCompulatedStyle()

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

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