How To Override An Element’s !Important Styles Using JavaScript

Override an Element’s !important Styles using JavaScript

This guide can help you learn how to override an element’s !important styles using JavaScript. Follow this guide to learn more about it with the explanation and examples below.

Override An Element’s !Important Styles Using JavaScript

Before learning how to override an Element’s !important Styles. We learn what CSS Important is together.

The CSS important is used to change the order of priority of CSS code. The CSS property assigned important will have the highest priority, whether the element is defined inline or in the CSS file.

To understand better, let’s take a look at the following example.

Given HTML file with CSS property as follows.

<!DOCTYPE html>
<html>
    <head>
        <title>
            How To Convert A Date To GMT In JavaScript
        </title>
    </head>
    <link rel="stylesheet" href="index.css">
<body style="text-align:left;">
    <h1 style="color: black;">
        How To Override An Element’s !Important Styles Using JavaScript
    </h1>
    <h2 style="color:blue;">
        What Is CSS Important?
    </h2>
    <h3 style="color: red;">
        LearnShareIT
    </h3>
</body>
</html

CSS file

h3{
    color: yellow !important ;
}

Output

The resulting h3 tag is yellow even when the CSS attribute is declared inline as red. The !important attribute will have the highest priority on the web page.

These are some methods that can help you override an Element’s !important Styles using JavaScript. You can use the setAttribute() method or the setProperty() method to do that.

Use the setAttribute() method

The setAttribute() method can help you set the new value to an attribute.

Syntax:

element.setAttribute(name,value)

Parameters:

  • name: The name of the attribute.
  • value: The new value.

Return value: None.

Look at the example below to learn more about this solution.

<!DOCTYPE html>
<html>
    <head>
        <title>
            How To Convert A Date To GMT In JavaScript
        </title>
    </head>
    <style>
        #content{
            display: block;
            color: red;
        }
    </style>
<body style="text-align:left;">
    <h1 style="color: black;">
        How To Override An Element’s !Important Styles Using JavaScript
    </h1>
    <h2 style="color:blue;">
        Override An Element’s !Important Styles Using JavaScript
    </h2>
    <h3>
        Use the setAttribute() method
    </h3>
    <div id = 'content'>
        LearnShareIT
    </div>
    <script>
        function showElement(){
            const element = document.getElementById('content')
            element.style.setProperty('color','yellow','important')
            return element
        }
        showElement();
    </script>
</body>
</html>

Output

Use the setProperty() method

You can learn about the usage of the setProperty() method and how to use it in my previous tutorial here.

Look at the example below to learn more about this solution.

<!DOCTYPE html>
<html>
    <head>
        <title>
            How To Convert A Date To GMT In JavaScript
        </title>
    </head>
    <style>
        #content{
            display: block;
            color: red;
        }
    </style>
<body style="text-align:left;">
    <h1 style="color: black;">
        How To Override An Element’s !Important Styles Using JavaScript
    </h1>
    <h2 style="color:blue;">
        Override An Element’s !Important Styles Using JavaScript
    </h2>
    <h3>
        Use the setProperty() method
    </h3>
    <div id = 'content'>
        LearnShareIT
    </div>
    <script>
        function showElement(){
            const element = document.getElementById('content')
            element.style.setProperty('color','yellow','important')
            return element
        }
        showElement();
    </script>
</body>
</html>

Summary

You can use the setAttribute() method or the setProperty() method to override an element’s !important styles using JavaScript. We hope this tutorial is helpful to you. Thanks!

Maybe you are interested:

Leave a Reply

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