CODEWITHSUNDEEP
jqueryhtml
Kobe1234
Kobe1234

Reputation: 33

How to override inline styles with !important using jquery?

I have a:

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

and then I want to override that style in JQuery, how would I do it?

using !important in CSS obviously doesn't work(but tried it anyway). I'm thinking if I can do something like:

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

any thoughts on this??

Upvotes: 2

Views: 9175

Answers (2)

Srikrushna
Srikrushna

Reputation: 4955

Simply first unset/remove the color using the style like below,then set the color

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

Set the color once again which you want

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

Upvotes: 1

justinw
justinw

Reputation: 3976

Your code is correct, you can do it exactly like you suggested. Even though there is an inline style rule already on the element, once the document is ready, it will replace that rule with what you've written, see here.

DEMO

If for some reason, you want more assurance, you can clear the inline styling before you apply the new styling with the removeAttr() jquery method (but it's a bit of a waste of code).

DEMO

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

Upvotes: 2

Related Questions