Question

我有一个：

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

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

在CSS中使用!important显然不起作用（但无论如何都尝试过）。我在想我是否可以这样做：

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

对此的任何想法??

Answer 1

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

<强> DEMO

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

<强> DEMO

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

首先使用以下样式取消设置/删除颜色，然后设置颜色

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

再次设置所需的颜色

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