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

我正在对某些元素使用

mouseenter

和

mouseleave

事件来更改它们的外观。我可以使用以下两种策略之一：

$（this）.css（'someProperty'，'someValue'）

添加，然后

$（this）.removeAttr（'style'）

删除

$（this）.addClass（'someClass'）

添加，然后

$（this）.removeClass（'someClass'）

删除

---

这样做的最佳方式是什么？

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

还有一个，如果类存在，则删除它，如果缺少则添加它

---

注意：

toggleClass

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

完全等同于：

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

当您的代码中已经有布尔值时，这非常方便。因此，与此相反：

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

你可以这样做：

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

---

我强烈推荐

addClass（）

/

removeClass（）

，因为您可以用最少的jQuery添加、删除和更改整个属性区

鉴于

css（）

方法要求您，或者更确切地说是脚本，跟踪应该更改什么以反映传达编程交互的美学变化，将其与

attr（）

方法耦合并删除

style

属性将删除所有样式，即使是您希望元素保留的样式，这要求您重新分配这些属性

因此，基本上，方案2是有效的，方案1产生了不必要的工作

---

当然，总有一些方法可以提高效率。

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

.addClass

和

是最好的方法。removeClass

是因为您可以使用css设置更改的样式……因此，过一段时间后，您可以轻松地重新设计站点

选项2，如果您必须使用JavaScript，但对于现代浏览器，您可能可以使用

：hover

伪类在CSS中完全实现您想要的功能。

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

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

---

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

我认为是这样，但不确定。同意removeAttr，但喜欢它与mouseenter/mouseleave（或hover）一起使用，toggleClass（）是否合适？@user1032531-如果您仅使用

mouseenter

/

mouseleave

，您应该在样式表中使用

：hover

伪类。

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