each()返回超4个<ul>时应用内联样式不生效，求排查原因

嘿，我来帮你捋捋这个问题！既然你说console.log能正常输出，说明判断div里<ul>数量的逻辑是对的，那样式没生效大概率是样式应用的环节出了问题，我整理了几个前端开发中常踩的坑，你可以挨个排查：

• JS设置内联样式时属性名写错了
  咱们在CSS里用短横线命名属性（比如background-color），但在JS里得用驼峰式写法，或者方括号包裹短横线属性名，不然JS会把短横线当成减号，直接报错或者忽略这个样式：

  // ❌ 错误写法：短横线会被JS解析成减号
  targetDiv.style.background-color = "#e6e6e6";
  // ✅ 正确写法1：驼峰式命名
  targetDiv.style.backgroundColor = "#e6e6e6";
  // ✅ 正确写法2：方括号包裹短横线属性名
  targetDiv.style['background-color'] = "#e6e6e6";
  

• 内联样式被更高优先级的CSS规则覆盖了
  虽然内联样式优先级很高，但如果你的全局CSS里有带!important标记的规则，或者父元素有更强制的样式，内联样式可能被划掉失效。你可以按F12打开浏览器开发者工具，选中目标div，看「Styles」面板里你的内联样式是不是被划掉了——如果是，就是被其他样式覆盖了。这时候可以用setProperty方法给内联样式加上!important（尽量少用，万不得已再用）：

  targetDiv.style.setProperty('background-color', '#e6e6e6', 'important');
  

• 你操作的元素不是目标div？
  有时候逻辑判断的console.log没问题，但遍历过程中可能选错了元素——比如用querySelectorAll拿到的集合里混进了其他div，或者遍历的时候把当前元素搞错了。你可以在设置样式的那一行加个console.log(targetDiv)，看看输出的元素是不是你要修改的那个，有没有正确选中包含超过4个<ul>的div。

• 样式属性值格式不符合规范
  比如设置宽高时没加单位（写成targetDiv.style.width = 300而不是300px），颜色值少写了#（写成fff而不是#fff），这种无效的样式值会被浏览器直接忽略，看起来就是没生效。你可以检查下你设置的样式值是不是符合CSS语法要求。

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