• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Adding CSS Important Property Using JavaScript

Adding CSS Important Property Using JavaScript

August 5, 2022 Leave a Comment

There are a couple of ways we can add a CSS style as important using JavaScript. The best way we have found is to simply use the Style setProperty() method and target a specific style attribute.

document.getElementById("p1").style.setProperty("color", "red", "important");

If we wanted to do this to a div that only had a class and not an id, we could use the querySelector() method.

document.querySelector(".p1").style.setProperty("color", "red", "important");

Let’s see this in action below.


Let’s say we have the following HTML:

<style>#p1 { color: blue; font-weight: bold; }</style>
<div id="div1">
  <p id="p1">This is a paragraph.</p>
</div>

Here is the code for you to see:

This is a paragraph.

Now let’s use our code from above to change the color of the text to red using the setProperty() method.

And here is the JavaScript code:

document.getElementById("p1").style.setProperty("color", "red", "important");

Here would be the result:

This is a paragraph.

Note this can also be done using jQuery.

Let’s look at one more way that we can add a CSS style as !important using JavaScript

Another Way to Add the CSS Important Property to an Element Using JavaScript

Another way we can add a CSS style as important using JavaScript is to create a class that has the style with the !important property, and then add that class using JavaScript with the help of the add() method.

<style>
.permanent-red {
 color: red !important; 
}
</style>
document.getElementById("p3").classList.add("permanent-red");

Or if we wanted to target a class again:

document.querySelector(".p3").classList.add("permanent-red");

Let’s say we have the following HTML:

<style>.p3 { color: blue; font-weight: bold; }</style>
<div id="div1">
  <p class="p3">This is a paragraph.</p>
</div>

Here is the code for you to see:

This is a paragraph.

Now let’s use our code from above to change the color of the text to red using the !important property and JavaScript.

Here is our new HTML. It just has a new class, permanent-red, in the style section.

<style>.permanent-red { color: red !important; } .p3 { color: blue; font-weight: bold; }</style>
<div id="div1">
  <p class="p3">This is a paragraph.</p>
</div>

And here is our JavaScript code:

document.querySelector(".p3").classList.add("permanent-red");

Here would be the result:

This is a paragraph.

Hopefully this article has been useful for you to understand how to add a CSS style as important in JavaScript.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Insert Item Into Array
  • 2.  Remove Commas From Array in JavaScript
  • 3.  How to Convert a String to Lowercase In JavaScript
  • 4.  JavaScript Change Text Color of a Paragraph
  • 5.  JavaScript Ceiling – Using Math.ceil() Method to Round Up to Ceiling
  • 6.  Using JavaScript to Convert String to Boolean
  • 7.  Subtract All Numbers in an Array Using JavaScript
  • 8.  Using JavaScript to Get the Current Month
  • 9.  Using JavaScript to Generate a Random Float Between 0 and 1
  • 10.  Examples Using the JavaScript += Addition Assignment Operator

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy