Why does my getComputedStyle console.logs initial values

Question

Why does my getComputedStyle console.logs initial values

128 views Asked by Noah Onyejese At 29 November 2022 at 09:12

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.

logs


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

Original Q&A

There are 2 answers

idleberg On 29 November 2022 at 09:16

Your script is running before the rendering of the DOM is complete. Try wrapping your preset in an event-listener. That way it's irrelevant in which order scripts and styles are inlined or loaded externally.

Example

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

Refer to the MDN documentation on DOMContentLoaded for details.

**Animus** · Accepted Answer · 2022-11-29T09:19:32+00:00

Animus On 29 November 2022 at 09:19 BEST ANSWER

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

TechQA.

Why does my getComputedStyle console.logs initial values

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in GETCOMPUTEDSTYLE

Popular Questions

Popular Tags

Trending Questions