jquery - 使用 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 上查看了其他类似的问题，但没有找到答案。关心称重吗？

谢谢

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

总而言之，如果在一个元素上更改多个样式，类通常会更快，或者与样式的速度大致相同，并且由于类更干净，更容易使用，我会这样做，除非你'只需更改一两个简单的 CSS 规则。

score 0 · Accepted Answer

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

4 回答 4