This guide can help you learn how to check if element’s style contains CSS property using JavaScript. Let’s follow this guide to learn more about it with the explanation and examples below.
Check If Element’s Style Contains CSS Property Using JavaScript
These are some methods that can help you achieve this. You can use the style object and check if the value is set.
Use the style object
You can check if element’s style contains CSS property using the style object on the element. If an element’s style doesn’t contain CSS property, the method will return an empty string.
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>
<body style="text-align:left;">
<h1 style="color: black;">
How To Check If Element’s Style Contains CSS Property Using JavaScript
</h1>
<h2 style="color:blue;">
Check If Element’s Style Contains CSS Property Using JavaScript
</h2>
<h3>
Use the style object
</h3>
<div id="content" style="background-color: rgb(182, 114, 250); width: 150px; height: 20px">
LearnShareIt
</div>
<script>
const content = document.getElementById('content');
// CCheck If Element’s Style Contains CSS Property
if (content.style.backgroundColor) {
document.write('The value: ', content.style.backgroundColor);
}
else {
document.write('Element’s Style Does Not Contains CSS Property');
}
</script>
</body>
</html>Output
Set style property by setProperty() method
You can also set CSS property on the style object by using the setProperty() method.
Syntax:
setProperty(name,value)
Parameters:
- name: The name of the property.
- value: The value of the property.
Return value: None.
Look at the example below to learn more about this method.
<!DOCTYPE html>
<html>
<head>
<title>
How To Convert A Date To GMT In JavaScript
</title>
</head>
<body style="text-align:left;">
<h1 style="color: black;">
How To Check If Element’s Style Contains CSS Property Using JavaScript
</h1>
<h2 style="color:blue;">
Check If Element’s Style Contains CSS Property Using JavaScript
</h2>
<h3>
Set style property by setProperty() method
</h3>
<div id="content" style="background-color: rgb(182, 114, 250); width: 150px; height: 20px">
LearnShareIT
</div>
<script>
const content = document.getElementById('content');
//Set the new background color.
content.style.setProperty('background-color', 'red');
</script>
</body>
</html>Output
Summary
These are some ways that can help you check if element’s style contains CSS property using JavaScript. To do that, you can use the style object, and you can also set the style property by the setProperty() method built-in in the style object. We hope this tutorial is helpful to you. Thanks!
Maybe you are interested:
- Hide an Element after a few Seconds using JavaScript
- Remove CSS Style Property from an Element using JavaScript
- Get an Element’s CSS Display Value in 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
