使用JS获取元素高度传入CSS变量时变量返回undefined的问题

问题根源 #

1. 大小写错误：你用了大写的Document，但当前页面的文档对象应该是小写的document，大写的是文档构造函数，并非当前页面的实例。
2. 方法无返回值：setProperty方法本身不会返回任何值，把它的返回值赋值给navHeight，结果必然是undefined。
3. 缺少单位：offsetHeight返回的是纯数字（比如101），但CSS变量需要带单位（比如101px），否则calc无法正确计算。

修正后的代码 #

HTML脚本

<script>
    let navHeightTest = document.getElementById("navbar").offsetHeight;
    console.log(navHeightTest); // 输出导航栏高度数值
    
    // 修正大小写，给高度加上px单位
    document.documentElement.style.setProperty('--nav-height', `${navHeightTest}px`);
    
    // 若需要保存带单位的高度值，单独定义变量
    let navHeight = `${navHeightTest}px`;
    console.log(`Nav Height=${navHeight}`); // 输出带单位的高度值，不再是undefined
</script>

CSS（保留默认 fallback 值即可）

:root {
    --nav-height: 101px; /* 默认 fallback 值 */
}
.dynamic-margin {
    margin-top: calc(var(--nav-height) + 2.5rem) !important;
}

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