动态添加和删除元素样式的最佳方法

Question

我在某些元素上使用mouseenter和mouseleave事件来改变它们的外观。我可以使用以下两种策略中的任何一种来实现：

1. $(this).css('someProperty','someValue')添加，然后$(this).removeAttr('style')删除
2. $(this).addClass('someClass')添加，然后$(this).removeClass('someClass')删除

最好的方法是什么？

Answer 1

绝对选项2.样式应在样式表中定义。

还有toggleClass，如果它存在，则删除该类，但如果缺少则添加它。

---

注意： toggleClass还允许您传入布尔值作为第二个参数，告诉它是否添加或删除它（无论它当前是否已应用该类），所以：

$(this).toggleClass('active', true);

完全等同于：

$(this).addClass('active');

当您的代码中已经有布尔值时，这非常方便。所以不要这样：

if (isUserActive()) {
    $(this).addClass('active');
} else {
    $(this).addClass('active');
}

你可以这样做：

$(this).toggleClass('active', isUserActive());

Answer 2

选项2如果您必须使用JavaScript，但对于现代浏览器，您可以使用:hover伪类完全使用CSS来实现您的目标。

Answer 3

我强烈推荐addClass() / removeClass()，因为您可以使用最少的jQuery添加，删除和更改整个属性。

css()方法要求您或者更确切地说脚本要跟踪应该更改的内容以反映传达程序化交互的美学变化，并将其与attr()方法相结合并删除style属性将删除所有样式，甚至是您希望该元素保留的样式，这需要您重新分配这些属性。

因此，基本上，选项2是有效的，选项1会产生不必要的工作。

当然，总有toggleClass()可以提高效率。

Answer 4

除非您需要动态生成任何CSS属性值，否则最好将样式与javascript分开。所以使用类而不是直接的CSS样式。

Answer 5

.addClass和.removeClass是最好的方式，因为您可以使用CSS设置更改样式...所以过了一段时间后，您可以轻松地重新设计您的网站。

Answer 6

第二个是最好的，因为通常样式对于不同的元素是常见的，它将是通用的，并且与逐个添加属性相比，添加删除是很好的。

$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove

Answer 7

如果您在多个元素中调用此函数，我建议您使用第二个元素。如果以后需要再次更改外观，则必须仅在css类中编辑，而不是在所有元素中编辑