How to Override Inline CSS Through JavaScript

How to override inline css through javascript?

Of course you can by using jQuery's css() method : http://docs.jquery.com/CSS/css#namevalue

So if for example you have the following HTML:

<p style="color:red;">A colored text</p>

You can change the color by doing the following in jQuery:

$("p").css("color","blue");

And it's going to work in IE6.

Override Inline Styles added via JS with CSS

Contrary to the other answers, it is possible to override inline styles with CSS:

http://css-tricks.com/override-inline-styles-with-css/

I would guess that the extremely long selector might not be hitting the element.

I had a similar z-index issue with the Janrain plugin that was solved by this:

#janrainEngageEmbed > div[style] {
    z-index: 0;
}

In your case, you probably need:

    z-index: 0 !important;

How to override inline style dynamically?

You don't need to use jQuery for this simple task, especially if you are not already using it.

Just put an inline style on the divs, this will override the the pre existing CSS.

function overridePosition() {  var divs = document.getElementsByTagName('div'),    len = divs.length,    i = 0;  for (; i < len; i += 1) {    // static is the default value of possition    divs[i].style.position = 'static';  }}
window.onload = function() {  document.querySelector('button').addEventListener('click', overridePosition);};

div {  position: relative;  left: 50px;}

<button>  Click Me To override position: relative</button><div>  <div title="remove css">Remove my style</div>  <div title="remove css">Remove my style</div>  <div title="remove css">Remove my style</div>  <div title="remove css">Remove my style</div></div>

How do I override inline CSS with Class CSS?

Taken from https://css-tricks.com/snippets/css/style-override-technique/

The !important rule at the end of a value will override any other style declarations of that attribute, including inline styles.

p { 
    font-size: 24px !important; 
}

How can I override inline styles with external CSS?

The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

How to override inline styles with !important using jquery?

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>

---

Related Topics