Overriding !important style

Posted on

Overriding !important style – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout and . Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Overriding !important style.

Problem :

Title pretty much sums it up.

The external style sheet has the following code:

td.EvenRow a {
  display: none !important;

I have tried using:

element.style.display = "inline";


element.style.display = "inline !important";

but neither works. Is it possible to override an !important style using javascript.

This is for a greasemonkey extension, if that makes a difference.

Solution :

There are a couple of simple one-liners you can use to do this.

  1. Set a “style” attribute on the element:

    element.setAttribute(‘style’, ‘display:inline !important’);


  1. Modify the cssText property of the style object:

    element.style.cssText = ‘display:inline !important’;

Either will do the job.


I’ve written a jQuery plugin called “important” to manipulate !important rules in elements, : http://github.com/premasagar/important


As shared in the comments, the standard CSSOM interface (the API for JavaScript to interact with CSS) provides the setProperty method:

element.style.setProperty(propertyName, value, priority);


document.body.style.setProperty('background-color', 'red', 'important');

element.style has a setProperty method that can take the priority as a third parameter:

element.style.setProperty("display", "inline", "important")

It didn’t work in old IEs but it should be fine in current browsers.

I believe the only way to do this it to add the style as a new CSS declaration with the ‘!important’ suffix. The easiest way to do this is to append a new <style> element to the head of document:

function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';

addNewStyle('td.EvenRow a {display:inline !important;}')

The rules added with the above method will (if you use the !important suffix) override other previously set styling. If you’re not using the suffix then make sure to take concepts like ‘specificity‘ into account.

Building on @Premasagar’s excellent answer; if you don’t want to remove all the other inline styles use this

//accepts the hyphenated versions (i.e. not 'cssFloat')
addStyle(element, property, value, important) {
    //remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
        element.style.setAttribute(property, '');

    //insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');

Can’t use removeProperty() because it wont remove !important rules in Chrome.
Can’t use element.style[property] = '' because it only accepts camelCase in FireFox.

If you want to update / add single style in DOM Element style attribute you can use this function:

function setCssTextStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\s]|^)(" +
      style.replace("-", "\-") + "\s*:(.*?)(;|$))")),
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";

style.cssText is supported for all major browsers.

Use case example:

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

Here is link to demo

If all you are doing is adding css to the page, then I would suggest you use the Stylish addon, and write a user style instead of a user script, because a user style is more efficient and appropriate.

See this page with information on how to create a user style


use initial property in css3

 <p style="color:red!important"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
    this is red again


One option to override CSS class in JavaScript is using an ID for the style element so that we can update the CSS class

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) document.getElementsByTagName('head')[0].removeChild(
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;


   var cssText = '.testDIV{ height:' + height + 'px !important; }';
    writeStyles('styles_js', cssText)

Rather than injecting style, if you inject a class(for eg: ‘show’) through java script, it will work. But here you need css like below. the added class css rule should be below your original rule.

td.EvenRow a{
  display: none !important;

td.EvenRow a.show{
  display: block !important;

There we have another possibility to remove a property value from the CSS.

Like using the replace method in js. But you have to know exactly the ID of the style, or you can write a for loop to detecting that by (count styles on the page, then check if any of those ‘includes’ or ‘match’ an !important value. & you can count also – how much contains them, or just simply write a global [regexp: /str/gi] replacing method)

Mine is very simple, but I attach a jsBin, for example:


First I set the body background in CSS for yellow !important, then I overrided by JS for darkPink.

$.fn.setFixedStyle = function(styles){
var s = $(this).attr("style");
s = "{"+s.replace(/;/g,",").replace(/'|"/g,"");
s = s.substring(0,s.length-1)+"}";
s = s.replace(/,/g,"","""").replace(/{/g,""{"""").replace(/}/g,""""}"").replace(/:/g,"""":"""")

Leave a Reply

Your email address will not be published. Required fields are marked *