javascript - 从 JavaScript 操作 CSS 的最佳实践？

Question

今天我遇到了一个问题，一个流氓 z-index 属性导致了问题。好的，它发生了，但问题是找到它被声明的地方。浏览器显示内联样式，但在标记中它是空的，在范围内搜索 z-index: 1001 的解决方案也没有给出任何结果。

最后我在一些 JavaScript 中找到了它

        $("#header").css({
          //other props
          "z-index": "1001"
        });

这给了我一些关于应该如何完成的想法，但我不确定。

问题:

JavaScript 逐个 prop 更改 CSS 还是创建多个 CSS 类并从 JS 更改元素类更好？

我倾向于使用多个类，但欢迎使用其他选项。

Answer 1

我建议只使用 addClass和 removeClass jQuery 中的方法。这样，您的 JavaScript 可以负责控制行为，而您的 CSS 仍然负责样式。

例如在你的 CSS 中:

.some-class {
    z-index:1001;
}

在你的 JavaScript 中:

$("#header").addClass('some-class');
//or 
$("#header").removeClass('some-class');