无法通过DOM方法设置ul>li样式，求滚动导航栏文本样式解决方案

1. 检查CSS优先级冲突 #

如果你的li元素在CSS里被更具特异性的选择器（比如#nav ul li）或!important修饰，JS设置的行内样式会被覆盖。可以通过两种方式解决：

• 用setProperty强制提升样式优先级：

  li.style.setProperty('font-size', '14px', 'important');
  li.style.setProperty('color', '#666', 'important');
  

• 调整CSS选择器的特异性，确保JS设置的行内样式能生效。

2. 正确处理元素集合 #

getElementsByClassName、getElementsByTagName返回的是HTMLCollection（类数组对象），不能直接给整个集合设置样式，必须遍历每个元素操作：

// 错误写法：直接操作集合
document.getElementsByTagName('li').style.fontSize = '12px';

// 正确写法：循环遍历每个li
const lis = document.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
  lis[i].style.fontSize = '12px';
  lis[i].style.color = '#333';
}

推荐用querySelectorAll，它返回的NodeList支持forEach遍历，写法更简洁：

const navLis = document.querySelectorAll('ul li');
navLis.forEach(li => {
  li.style.fontSize = '14px';
  li.style.color = '#666';
});

3. 确保DOM加载完成后执行JS #

如果JS代码在DOM还没渲染完就执行，会获取不到li元素，导致样式设置无效。把代码放在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', () => {
  window.addEventListener('wheel', (e) => {
    const navLis = document.querySelectorAll('ul li');
    if (e.deltaY > 0) {
      // 向下滚动：缩小字体、改变颜色
      navLis.forEach(li => {
        li.style.fontSize = '14px';
        li.style.color = '#666';
      });
    } else {
      // 向上滚动：恢复原样式
      navLis.forEach(li => {
        li.style.fontSize = '16px';
        li.style.color = '#000';
      });
    }
  });
});

4. 验证滚动方向判断逻辑 #

先确认e.deltaY的判断是否正确——正数代表向下滚动，负数代表向上滚动。可以在滚动事件里加日志输出：

window.addEventListener('wheel', (e) => {
  console.log('滚动方向值：', e.deltaY); // 检查输出是否符合预期
  // 后续样式设置逻辑
});

如果日志没输出，说明滚动事件绑定有问题；如果输出值不对，调整方向判断条件。

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