从JavaScript操作CSS的最佳实践？

今天我遇到了一个问题，当一个流氓z-index属性导致问题。好吧，它发生了，但问题是找到它被宣布的地方。浏览器显示内联样式，但在标记中为空，搜索解决方案的范围为z-index: 1001也没有提供任何内容。从JavaScript操作CSS的最佳实践？

最后我发现它在一些JavaScript

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

这给了我这件事应该怎么做了一些想法，但我不知道。

问题：

是更好地利用道具从JavaScript道具改变CSS或使多个CSS类和JS改变元素类？

我倾向于使用多个类，但另一个选项是欢迎的。

2014-04-02 berzinsu

对于我的钱，我宁愿做在课堂上，而不是内联JS。当你修改样式时，你去CSS。你不想挖掘大量的JS规则来找到一个“行高”规则，它将整个页面搞乱了。 – Askanison4

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

根据Nicholas Zakas的说法，避免JS中的编码风格属性是最好的做法。而是使用预定义的类，只需使用JS更改className属性即可。扎卡斯在这次讲座中谈到：http://youtu.be/mHtdZgou0qU?t=35m12s – Nillervision

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

例如在你的CSS：

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

在JavaScript

：

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

2014-04-02 11:30:47

回答