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

2018-07-04 01:35:14

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

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

$(this).addClass('someClass')添加，然后$(this).removeClass('someClass')删除

最好的办法是什么？

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

还有toggleClass ，如果它在那里，则会移除该类，但如果缺失则添加它。

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

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

完全等同于：

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

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

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

你可以这样做：

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

选项2，如果你必须在JavaScript中完成它，但对于现代浏览器，你可能能够完全使用CSS :hover伪类。

我强烈建议使用addClass() / removeClass() ，因为您可以使用最少量的jQuery添加，删除和更改一大堆属性。

然而， css()方法需要你或者脚本来跟踪应该改变什么以反映传达程序化交互的美学变化，将它与attr()方法耦合并删除style属性将会消除所有样式，即使那些你想要的元素保留，这需要你重新分配这些属性。

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

当然，总是使用toggleClass() ，这可以提高效率。

链接地址: http://www.djcxy.com/p/94873.html