用 css 或 jquery 覆盖 !important

Posted 2023-02-22

【中文标题】用 css 或 jquery 覆盖 !important

【英文标题】：Overriding !important with css or jquery

【发布时间】：2012-08-11 08:58:34

【问题描述】：

（这是在 chrome 扩展中使用内容脚本）

我需要覆盖网页标记为!important 的一些css 属性。这可能吗？

例如，如果我想去掉标记为重要的边框：

$(".someclass").css('border','none'); //does not work

【问题讨论】：

你搜索过吗？我找到了***.com/questions/462537/…

@ŠimeVidas：这个问题是关于 javascript 的；这个问题是关于 jQuery 的。最终的解决方案可能是相同的，但问题的作者不知道（我也不知道），我认为大多数开发人员会同意使用 jQuery 解决方案的最佳实践，如果存在的话。

How to apply !important using .css()?的可能重复

【参考方案1】：

给你：

$( '.someclass' ).each(function () 
    this.style.setProperty( 'border', 'none', 'important' );
);

现场演示： http://jsfiddle.net/Gtr54/

元素的style 对象的.setProperty 方法使您能够传递代表优先级的第三个参数。所以，你用你自己的 !important 值覆盖了一个 !important 值。据我所知，使用 jQuery 无法设置 !important 优先级，因此您唯一的选择是内置 .setProperty 方法。

【讨论】：

在 IE8 中失败并显示“对象不支持此属性或方法”

@StuartDobson 是的，在 IE8 中失败-.-

在 Mosaic 2 中也失败了。 :-P

这是一个很好的答案，但有一点需要注意 - 如果 $('#container).style 不起作用 - 请改用 $('#container)[0].style

@yaru 是的，style 属性仅适用于 DOM 元素本身，不适用于 jQuery 对象。

【参考方案2】：

您也可以这样做：

$(".someclass").css("cssText", "border: none !important;");

【讨论】：

这将覆盖样式

【参考方案3】：

这应该会有所帮助。

$(".someclass").attr("style","border:none!important");

已更新，以免覆盖所有样式：

var existingStyles = $(".someclass").attr("style");
$(".someclass").attr("style", existingStyles+"border:none!important");

【讨论】：

将替换所有其他样式

【参考方案4】：

还有一种方法

$("#m_divList tbody").find("tr[data-uid=" + row.uid + "]").find('td').css("cssText", "color: red !important;");

css("cssText", "color: red !important;");

【参考方案5】：

我们可以使用 jquery 添加类

$("someclass").addClass("test");

<style>
.test
border:none !important;

</style>

【讨论】：

这不适用于动态生成的样式（例如高度或颜色）。 jQuery devs are pitching this as a viable workaround. ?

简直太可笑了