为什么通过clientHeight获取的高度值无法应用到其他元素的样式上？

问题根因 #

• clientHeight返回的是不带单位的数字类型值，例如头部高度为60时返回的是数字60，而非符合CSS要求的60px
• JS操作DOM的style长度属性时，必须显式指定单位，否则浏览器无法识别该样式规则，因此赋值不生效。

修复代码 #

将赋值语句拼接像素单位px即可：

function sidenav_height(){
  var height = document.getElementById("header").clientHeight;
  document.getElementById("sidenav").style.marginTop = height + 'px';
  // 如果使用top属性写法一致：
  // document.getElementById("sidenav").style.top = height + 'px';
}

若修改后仍未生效，可排查sidenav元素的对应样式是否被带!important标识的CSS规则覆盖，行内样式优先级低于带!important的外部样式。

可选优化 #

如果需要适配窗口缩放、头部高度动态变化的场景，可额外绑定resize事件触发高度更新：

window.addEventListener('resize', sidenav_height);

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