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>
</htmlCSS 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:
- Show a `hidden` Div on Hover using JavaScript
- Check if Element’s Style contains CSS property using JavaScript
- Check If An Element Is Read-Only Using JavaScript
My name is Thomas Valen. As a software developer, I am well-versed in programming languages. Don’t worry if you’re having trouble with the C, C++, Java, Python, JavaScript, or R programming languages. I’m here to assist you!
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Java, Python, JavaScript, R
