Get elements heights using JS and pass into CSS variable

Question

I want to get the height of an element and pass it into a css variable. The issue im having is when i try to pass that number into the navHeight variable it ends up returning as undefined.

<script>
    let navHeightTest = document.getElementById("navbar").offsetHeight;
    console.log(navHeightTest); // Returns the nav height as a number
    
    let navHeight = Document.documentElement.style.setProperty('--nav-height', navHeightTest);
    console.log(`Nav Height=${navHeight}`); // Returns undefined 
</script>

CSS

    :root {
        --nav-height: 101px; /* Default Fallback Value */
    }
    .dynamic-margin {
        margin-top: calc(var(--nav-height) + 2.5rem) !important;
    }

jaketakesthecake · Accepted Answer · 2023-01-20 00:13:03Z

1

Good question - this can get confusing because setProperty returns undefined, not the value you just set.

Check out the Return value entry in the docs: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty#return_value

If you observe that the --nav-height variable isn't being updated either it might be because you're missing the units when you call setProperty. Since your default in the CSS is in pixels, and offsetHeight reports the number in pixels, I'm guessing you want pixels. Note the 'px' at the very end of the line.

let navHeight = Document.documentElement.style.setProperty('--nav-height', navHeightTest + 'px');

answered Jan 20, 2023 at 0:13

jaketakesthecake

612 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Halp_am_stuck1 Over a year ago

thanks! i just tried figuring it out with chatGPT and it gave the same thing essentially - i was missing the "px". I did not know that setProperty returns undefined though, that is super helpful knowledge. Cheers!

Collectives™ on Stack Overflow

Get elements heights using JS and pass into CSS variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related