style.fontWeight不生效求助：文本样式控制功能异常排查

这问题我碰到过好几次，大概率是CSS优先级或者样式作用对象不匹配的问题，咱们一步步拆解：

• 检查CSS中是否使用了!important强制优先级
  如果你的CSS代码里写了类似这样的规则：

  .Basic-Text-Frame {
    font-weight: normal !important;
  }
  

  那JS通过element.style.fontWeight设置的内联样式会被直接覆盖——因为!important的优先级是最高的，哪怕内联样式通常优先级更高也没用。
  解决办法：要么去掉CSS里的!important（更推荐，尽量避免滥用!important），要么在JS里也强制添加!important（不推荐，但应急可用）：

  cols[i].style.fontWeight = "bold !important";
  

• 确认JS的样式作用对象是否正确
  你提到要控制「父元素下的所有目标元素」，但看你的示例代码（比如myFunction3）是直接给父元素.Basic-Text-Frame设置样式。如果你的CSS里的font-weight是直接作用在父元素的子元素上（比如.Basic-Text-Frame span { font-weight: normal; }），那父元素的font-weight继承会被子元素的直接样式覆盖。
  这时候需要遍历父元素下的目标子元素来设置样式，比如：

  function myFunction8() {
    var cols = document.getElementsByClassName("Basic-Text-Frame");
    for (i = 0; i < cols.length; i++) {
      // 替换成你实际的目标子元素选择器，比如"p"、".text-content"等
      var targetKids = cols[i].querySelectorAll(".your-target-child-class"); 
      for (let j = 0; j < targetKids.length; j++) {
        targetKids[j].style.fontWeight = "bold"; // 或者"normal"、"700"等合法值
      }
    }
  }
  

  另外要注意：fontWeight的取值是字符串，比如"bold"、"normal"、"600"，别写错格式。

• 用浏览器控制台定位生效的样式规则
  打开浏览器开发者工具（F12），找到对应的元素，切换到「样式」面板，查看font-weight属性的生效情况——被划掉的样式就是被覆盖的，你能清楚看到是哪条CSS规则在干扰JS设置的样式，直接定位问题根源。

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