从 JavaScript 操作 CSS 的最佳实践？

Question

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

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

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

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

问题：

是从 JavaScript prop 更改 CSS 更好，还是制作多个 CSS 类并从 JS 更改元素类更好？

我倾向于使用多个类，但欢迎另一种选择。

Answer 1

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

例如在你的CSS中：

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

在你的 JavaScript 中：

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