为何使用.style.top无法获取CSS中设置的元素top属性值

为什么.style.top返回空字符串 #

HTMLElement.style 只能读取元素行内样式（即直接写在HTML标签style属性中的样式），你在外部CSS文件中定义的top属性不属于行内样式范围，因此无法通过.style直接读取，自然返回空值。

正确获取CSS中定义的top属性的方法 #

方法1：使用getComputedStyle读取最终生效样式 #

window.getComputedStyle() 可以获取浏览器对元素计算完成后最终生效的所有样式，不受样式来源限制，示例代码如下：

const player = document.querySelector("#player");
// 获取元素的计算后样式
const playerStyle = window.getComputedStyle(player);
// 读取top属性，返回值为带单位的字符串，例如 '100px'
console.log(playerStyle.top);

// 如果需要纯数值，可以直接转成数字
const topValue = parseInt(playerStyle.top);
console.log(topValue); // 输出 100

注意：getComputedStyle 返回的样式是只读的，如果你需要修改元素的top属性，依然要通过.style.top赋值，赋值内容会自动写入元素行内样式，优先级高于外部CSS，可正常生效。

方法2：将位置属性写在行内样式中 #

如果你的业务场景需要频繁读写元素的位置属性，可以直接把top、left等定位属性写在元素的行内style里，这样就可以直接通过.style.top读写：

<!-- 修改后的HTML标签 -->
<img id="player" style="top: 100px; left: 10px;" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">

此时你的原有JS代码就可以正常输出结果：

let playerTop = document.querySelector("#player").style.top
console.log(playerTop) // 输出 '100px'

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