从JavaScript操纵CSS的最佳实践是什么？

Question

今天我遇到了一个问题，因为一个不良的z-index属性导致了问题。好吧，这种情况很常见，但问题是找到它被声明的地方。浏览器显示内联样式，但在标记中它是空的，广泛搜索z-index: 1001的解决方法也没有任何结果。

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

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

这给了我一些想法，但我不确定该如何做。

问题是：

从JavaScript逐个属性更改CSS还是使用多个CSS类并从JS更改元素类，哪种更好？

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

- berzinsu

---

就我个人而言，我更喜欢使用类来编写代码，而不是内联JS。当你要修改样式时，你需要去CSS文件中进行修改。你不想在大量的JS规则中寻找那个破坏整个页面的“行高”规则。 - aaron-bond

可维护性：多个类。快速开发：JS内联。 - aurbano

根据Nicholas Zakas的说法，最好避免在JS中编写样式属性。相反，使用预定义的类，并使用JS更改className属性。Zakas在这个讲座中谈到了这个问题：http://youtu.be/mHtdZgou0qU?t=35m12s - Nillervision

Answer 1

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

例如，在您的CSS中：

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

在你的 JavaScript 中：

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

- Matthew Dresser