为何getComputedStyle打印的是初始值而非设置的z-index值？

我尝试用getComputedStyle访问元素的CSS属性，但console.log()只打印出初始属性值，而非我设置的样式值。以下是我的代码：

代码实现 #

<body>
    <div id="box">box</div>

    <script>
        const box = document.getElementById("box");
        
        const boxCS = window.getComputedStyle(box)
        
        console.log(boxCS.zIndex)
    </script>
</body>

<style>
    #box {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        position: absolute;
        z-index: 1;
        background-color: rgb(200, 200, 200);
    }
</style>

解决方案 #

• 使用getPropertyValue()方法获取属性值
  直接通过驼峰式属性名（如boxCS.zIndex）访问可能存在解析偏差，改用getPropertyValue()传入标准CSS属性名，能更可靠拿到计算后的实际值：

const box = document.getElementById("box");
const boxCS = window.getComputedStyle(box);
console.log(boxCS.getPropertyValue('z-index')); // 输出 "1"

• 确保DOM完全加载后执行代码
  如果脚本在DOM未解析完成时运行，可能无法正确读取元素样式。虽然你的脚本已经放在body末尾，也可以用DOMContentLoaded事件确保执行时机正确：

document.addEventListener('DOMContentLoaded', () => {
    const box = document.getElementById("box");
    const boxCS = window.getComputedStyle(box);
    console.log(boxCS.getPropertyValue('z-index'));
});

问题原因 #

getComputedStyle返回的是实时的CSSStyleDeclaration对象，但部分属性的驼峰式映射（比如z-index对应zIndex）在浏览器中存在特殊处理逻辑，可能导致返回默认初始值；而getPropertyValue()是直接按CSS标准属性名查询计算结果，准确性更高。

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