用CSS或jQuery覆盖!important属性

Question

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

我需要覆盖一些被网页标记为！important的CSS样式属性。这可行吗？

例如，如果我想去掉被标记为important的边框：

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

- Wilson

---

你在 Stack Overflow 上搜索了吗？我找到了 https://dev59.com/c3RB5IYBdhLWcg3w77kn - Šime Vidas

@ŠimeVidas：那个问题涉及JavaScript；而此问题与jQuery有关。虽然最终的解决方法可能相同，但问题的作者不会知道（我也不知道），我认为大多数开发人员都会同意，在存在jQuery解决方案时最好使用它。 - Michael Scheper

可能是如何使用.css()应用!important？的重复问题。 - Prateek

Answer 1

给你：

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

实时演示：http://jsfiddle.net/Gtr54/

元素的style对象的.setProperty方法允许您传递第三个参数，该参数表示优先级。因此，您可以使用自己的!important值替换已有的!important值。据我所知，使用jQuery无法设置!important优先级，因此您的唯一选择是使用内置的.setProperty方法。

- Šime Vidas

---

在IE8中失败，显示“对象不支持此属性或方法”。 - Stuart Dobson

是的，IE8不能正常运行。 - Šime Vidas

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

这是一个很好的回答，但有一个要注意的地方——如果 $('#container).style 不起作用，可以使用 $('#container)[0].style。 - yaru

@yaru 是的，style 属性只能在 DOM 元素本身上使用，而不能在 jQuery 对象上使用。 - Šime Vidas

祝福您先生，祝福您。 - user3748818

Answer 2

你也可以这样做：

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

- 9ete

---

这会覆盖样式。 - Miguel

Answer 3

这应该会有所帮助。

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

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

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

- Pallavi Dwivedi

---

Will replace all other styles - melvin

Answer 4

我们可以使用jQuery添加类。

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

<style>
.test{
border:none !important;
}
</style>

- Shubham Chopra

---

这不适用于动态生成的样式（如高度或颜色）。仅仅是荒谬的，jQuery开发人员将其推销为可行的解决方法。 - ADTC

Answer 5

还有另一种方式

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

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

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

可以用于在JavaScript中设置CSS样式。其中，"cssText"是要设置的CSS属性，"color: red !important;"是要设置的CSS值。这个函数可以让你在不改变其他CSS属性的情况下，只修改一个特定的CSS属性。

- user2244656

Answer 6

使用以下代码来覆盖jQuery中的important。

<style>  
  div.woocommerce-variation-add-to-cart-disabled {
    display: none ! important;
  }
</style>

<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-disabled">
  <script>
    jQuery(document).ready(function() {
      jQuery('.woocommerce-variation-add-to-cart').attr('style', 'display: block !important;');
    });
  </script>
</div>

- Rana Abdullah