如何在JavaScript中设置CSS class属性 有没有无需遍历的实现方案？

方案1：直接向样式表插入规则 #

无需遍历DOM元素，直接给全局样式表新增一条匹配.pizza的样式规则即可：

// 兼容旧版IE的写法
document.styleSheets[0].addRule('.pizza', 'display: none');

// 现代浏览器标准写法
// 第二个参数0表示插入到样式表的最前面，优先级更高
document.styleSheets[0].insertRule('.pizza { display: none; }', 0);

方案2：父级加类配合预设CSS（推荐） #

提前在CSS中写好对应状态的规则，JS只需要给公共父元素添加一个类即可生效，性能最优，也方便后续切换状态：
首先在CSS文件中添加：

/* 提前预设的状态规则 */
body.hide-all-pizza .pizza {
  display: none;
}

JS 仅需一行代码：

document.body.classList.add('hide-all-pizza');

如果后续需要恢复显示，只要调用document.body.classList.remove('hide-all-pizza')即可，非常方便。

注意事项 #

• 样式表插入规则的方式如果后续需要覆盖，需要注意样式优先级，或者主动删除之前插入的规则。
• 如果页面上的.pizza元素是后续动态新增的，上面两种方案依然可以自动生效，不需要重新执行逻辑，这是遍历修改行内样式做不到的优势。

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