javascript - 如何使用 .css() 应用 !important？

Question

我在应用 !important 样式时遇到问题。我试过:

$("#elem").css("width", "100px !important");

这什么都不做；没有应用任何宽度样式。是否有一种类似 jQuery 的方式来应用这种样式而不必覆盖 cssText(这意味着我需要先解析它，等等)？

编辑:我应该补充一点，我有一个带有 !important 样式的样式表，我正试图用 !important 样式覆盖它内联，所以使用 .width() 之类的方法不起作用，因为它被我的外部 !important 样式覆盖了。

此外，将覆盖先前值的值已计算，因此我不能简单地创建另一个外部样式。

Answer 1

问题是由于 jQuery 不理解 !important 属性造成的，因此无法应用规则。

您可以解决该问题，并通过 addClass() 引用它来应用规则:

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

或者使用attr():

$('#elem').attr('style', 'width: 100px !important');

不过，后一种方法会取消设置任何先前设置的内联样式规则。所以请小心使用。

当然，有一个很好的论据表明@Nick Craver 的方法更简单/更明智。

上面的attr() 方法略有修改以保留原始样式 字符串/属性，并按照falko 的建议进行修改在评论中:

$('#elem').attr('style', function(i,s) { return (s || '') + 'width: 100px !important;' });