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

Question

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

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

最好的方法是什么？

Answer 1

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

还有toggleClass ，如果该类存在，则将其删除；如果该类缺失，则将其添加。

---

注意: toggleClass 还允许您传入一个 bool 值作为第二个参数，告诉它是否添加或删除它(无论当前是否应用了该类) )，所以:

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

完全等同于:

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

当您的代码中已有 bool 值时，这非常方便。所以代替这个:

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

你可以这样做:

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