使用jQuery应用CSS样式的最有效方法是什么？

Question

以下是使用我们熟悉的jQuery将CSS样式应用于元素的几种方法：

$('.box').css({'background':'#fff', 'color':'#000'});

或者，我们可以结合使用jQuery和外部CSS来获得相同的效果：

.box.deco { background:#fff; color:#000; }

...

$('.box').addClass('deco');

忽略生活在JS代码中的CSS样式是邪恶的事实（恕我直言），经过这么多年我一直在想这样做：哪种方法更有效？我现在正在处理任务，它将在多个DOM元素中进行相对大量的这种类型的样式操作，在这种情况下，性能值得考虑。

我确实在SO上查看了其他类似问题，但未找到答案。要小心吗？

由于

Answer 1

在CSS中拥有现有类名的最有效方法，只需交换类名。

请参阅：Reflows & Repaints: CSS Performance making your JavaScript slow?

Answer 2

在jsperf.com上运行基准测试，自己找出最有效的方法。你也可以在这里分享你的发现为后代。

Answer 3

在简单的javascript中，更改className通常比更改element.style更快，至少根据quirksmode所做的测试。

jQuery在同一个测试中的表现是不确定的，因为在更改jQ中的样式和类时会有相当多的额外检查，但我倾向于认为它的结果大致相同。

总而言之，如果在元素上更改多个样式，类通常会更快，或者与样式的速度大致相同，并且因为类更清晰，更容易使用，所以我会这样做，除非您只是更改一个或两个简单的CSS规则。

Answer 4

你已经是对了兄弟！我们可以结合使用jQuery和外部CSS来获得同样的效果。比第一个更有效率，但它也取决于情况...