Overriding !important style

web-development

css

javascript

style

byAnton Shumikhin·Mar 2, 2025

To override !important styles programmatically in JavaScript, use element.style.setProperty('css-property', 'value', 'important'). For example, setting text color to red against previous !important can be accomplished by:

// Making the text shout louder with red!
document.querySelector('.element-class').style.setProperty('color', 'red', 'important');

Direct Inline Style Overriding

Hard Reset with Style Attribute

By setting the style attribute of an element with !important, this can ensure your style has utmost precedence. This could be seen as bulldozing an existing structure to build anew:

let element = document.querySelector('.element-class');
// Move over, there's a new red in town!
element.setAttribute('style', 'color: red !important;');

However, using this method can completely overturn existing inline styles, so handle with care!

Taming the CSS Object Model

CSSOM as Swiss Army Knife

The CSS Object Model (CSSOM) provides a deeper level of control over style manipulation than simply setting attributes. Consider it your utility tool for style surgeries:

let styleSheet = document.styleSheets[0];
// Look, ma! I am changing styles on the fly!
styleSheet.insertRule('.element-class { color: red !important; }', styleSheet.cssRules.length);

Using CSSOM is effective but remember to watch out for browser support.

Bringing in the Head (tag)

Conversely, you might want to override styles by creating a <style> element and sticking it to the <head> of the document:

let style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('.element-class {color: red !important;}', 0);

This has the same level of dominance as an external stylesheet, put into effect within your JavaScript runtime.

Less Traveled Paths

CamelCase in JavaScript

Remember when dealing with CSS properties in JavaScript, style names should be camelCased:

// JavaScript is not a desert snake, it prefers camelCase
element.style.setProperty('fontSize', '16px', 'important');

Also take browser compatibility into consideration.

Plugins for jQuery Survivor

For those still jamming with jQuery, there's a plugin named "important" which makes the task less daunting:

// jQuery throws in a hat with its own flavor of important!
$('.element-class').important('color', 'red');

Even though jQuery might not hit on the modern trends, it can still be your ally in an older codebase.

RegEx Magic

In a more particular scenario, regular expressions may come in handy to manipulate inline style attributes:

let regex = /color:.*?(!important)?;/g;
// Like pulling a rabbit out of the hat (with regex)
element.style.cssText = element.style.cssText.replace(regex, 'color: red !important;');

Approach with caution - regexes require thorough testing for different cases, as they might produce unexpected behavior if not well-constructed.

Delving Further: Tactics and techniques

Inline Over External Styles?!

Inline styles may not be as powerful as you think. They don't stand a chance against external !important styles.

// Inline styles: Tough outside, meek inside
element.style.display = 'block';   // Yields to an external `display: none !important;`

Removing !important

To apply your own style, you could remove an !important rule and add your style.

// Out with the old, in with the new
element.style.removeProperty('color');
element.style.setProperty('color', 'blue');

However, the removeProperty method might behave inconsistently with !important in certain browsers.

Practical Examples and Tools

Use resources like https://jsfiddle.net/ for practical demonstrations and to see how updating styles with !important works in real time.

Strict Mode: Inline styles limitations

Greasemonkey/Tampermonkey Extensions

For extensions like Greasemonkey and Tampermonkey, setProperty becomes a key method to manipulate styles effectively in user scripts.

// Greasing your styles with setProperty
element.style.setProperty('display', 'block', 'important');

explain-codes / Web development / Overriding !important style

Linked

How can I set multiple CSS styles in JavaScript?



Changing CSS Values with Javascript



How to get the background color of an HTML element?



Removing HTML element styles via JavaScript



Changing element style attribute dynamically using JavaScript



When to use the !important property in CSS



How to specify the order of CSS classes?



Direct Inline Style Overriding Taming the CSS Object Model Less Traveled Paths Delving Further: Tactics and techniques Strict Mode: Inline styles limitations