如何使用JavaScript获取元素的CSS position属性值

你可以使用浏览器内置的 window.getComputedStyle() API 来获取元素最终生效的CSS属性值，具体实现代码如下：

// 1. 获取目标DOM元素
const someDiv = document.querySelector('.some-div');
// 2. 获取元素计算后的完整样式对象
const computedStyle = window.getComputedStyle(someDiv);
// 3. 读取position属性
const positionVal = computedStyle.position;

console.log(positionVal); // 输出结果："relative"

注意事项 #

• 不要直接用 someDiv.style.position 取值：这个方式只能读取到写在元素行内style属性上的样式，你示例中的position是定义在类选择器样式里的，直接读取会返回空字符串。
• window.getComputedStyle 返回的是浏览器最终计算后生效的所有样式值，不管样式是定义在外部CSS文件、页面<style>标签还是行内样式，都能正确获取。

内容的提问来源于stack exchange，提问作者Luuk