Why does my getComputedStyle console.logs initial values-CodePudding

Hi guys I wanted to use getComputedStyle to access css properties, unfortunately it only console.log()'s standard properties.

below you will find my code.

On the picture you will find what it logs outt.

enter image description here


<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>

CodePudding user response：

Your script is running before the rendering of the DOM is complete. Try wrapping your preset in an event-listener.

Example

window.addEventListener("DOMContentLoaded", () => {
    const box = document.getElementById("box");
    const boxCS = window.getComputedStyle(box)
        
    console.log(boxCS.zIndex)
});

Refer to the MDN documentation on DOMContentLoaded for details.

CodePudding user response：

One of the reasons is that you declare styles after the script. If you put it before script, it'll be okay. Example