如何使用 !important 使用 jquery 覆盖内联样式？答案

【问题标题】：How to override inline styles with !important using jquery?如何使用 !important 使用 jquery 覆盖内联样式？
【发布时间】：2018-06-28 15:32:50
【问题描述】：

我有一个：

<p style="color:red !important;">sample text here</p>

然后我想在 JQuery 中覆盖该样式，我该怎么做？

在 CSS 中使用 !important 显然不起作用（但还是尝试了）。我在想我是否可以这样做：

$(document).ready(function(){
  $('p').css("color","#fff");
});

对此有什么想法吗？？

【问题讨论】：

标签： jquery html

【解决方案1】：

您的代码是正确的，您可以完全按照您的建议进行操作。即使元素上已经有一个内联样式规则，一旦文档准备好，它将用您编写的内容替换该规则，see here。

如果出于某种原因，您想要更多的保证，您可以在使用 removeAttr() jquery 方法应用新样式之前清除内联样式（但这有点浪费代码）。

$(document).ready(function(){
	$('p').removeAttr('style');
  $('p').css("color","blue");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p style="color:red !important;">sample text here</p>

【讨论】：

【解决方案2】：

只需先使用如下样式取消设置/删除颜色，然后设置颜色

$('p').css('color', '')

再次设置你想要的颜色

$('p').css('color','green');

【讨论】：