2

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

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

最好的方法是什么？

4

7 回答 7

4

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

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

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

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

完全等同于：

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

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

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

你可以这样做：

$(this).toggleClass('active', isUserActive());
于 2012-10-28T18:00:00.993 回答
1

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

于 2012-10-28T18:01:47.593 回答
0

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

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

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

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

于 2012-10-28T18:00:11.180 回答
0

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

于 2012-10-28T18:00:33.723 回答
0

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

于 2012-10-28T18:01:07.810 回答
0

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

$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove
于 2012-10-28T18:02:23.740 回答
0

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

于 2012-10-28T18:06:25.283 回答