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

【问题标题】：Best way to dynamically add and remove style on elements在元素上动态添加和删除样式的最佳方法
【发布时间】：2012-10-18 03:59:37
【问题描述】：

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

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

最好的方法是什么？

【问题讨论】：

【解决方案1】：

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

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

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

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

完全等同于：

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

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

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

你可以这样做：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

选项 2 如果您必须在 JavaScript 中执行此操作，但对于现代浏览器，您可以使用 :hover 伪类完全在 CSS 中实现您所追求的。

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

如果您在多个元素中调用此函数，我建议您使用第二个元素。如果您稍后需要再次更改外观，那么您只需在 css 类中进行编辑，而不是在所有元素中进行编辑

【讨论】：