为何CSS直接声明font-size生效，而JavaScript设置fontSize却不生效？

嘿，这个问题我太熟了！你JavaScript代码里的字体大小设置不生效，核心原因是你没有通过元素的style对象来修改样式。

为什么CSS直接写生效，JS却不行？ #

• 当你在CSS里给#middle加font-size: 50%;时，这是在样式规则中直接定义元素的样式，浏览器会正确解析并应用。
• 但在JavaScript中，DOM元素本身并没有一个直接可赋值的fontSize属性——你必须通过元素的.style对象来操作行内样式，否则你的赋值操作只是给元素添加了一个自定义属性，根本不会影响样式渲染。

修正后的JavaScript代码 #

把原来的document.getElementById("middle").fontSize改成document.getElementById("middle").style.fontSize就可以了：

let middleSize = document.getElementById("middle").clientHeight;
let topSize = document.getElementById("top").clientHeight;
let bottomSize = document.getElementById("bottom").clientHeight;
if (middleSize > 200 - (topSize + bottomSize)) { 
  document.getElementById("middle").style.fontSize = "50%" 
}

额外提醒：确保DOM加载完成 #

还有一个容易踩坑的点：如果你的JS代码是在DOM元素加载前执行的，getElementById会返回null，自然也无法设置样式。建议把代码放在DOMContentLoaded事件监听里，或者放在页面底部：

document.addEventListener('DOMContentLoaded', function() {
  let middleSize = document.getElementById("middle").clientHeight;
  let topSize = document.getElementById("top").clientHeight;
  let bottomSize = document.getElementById("bottom").clientHeight;
  if (middleSize > 200 - (topSize + bottomSize)) { 
    document.getElementById("middle").style.fontSize = "50%" 
  }
});

完全懂你的感受，有时候遇到这种看起来逻辑没问题但就是不生效的小细节，再加上被误标重复的糟心事，确实挺闹心的😅

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