The style object in JavaScript allows you to dynamically change the CSS styles of HTML elements using the
.style property. It provides access to both inline styles and computed styles of an element.
How to Access the Style Object?
Using element.style (Inline Styles)
- The
.styleproperty is used to set or get inline CSS styles.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Style Object Example</title>
<style>
.highlight { color: red; font-weight: bold; }
</style>
</head>
<body>
<p id="myDiv" class="active">This is the Para 1.</p>
<script>
let myDiv = document.getElementById("myDiv");
myDiv.style.color = "red"; // Changes text color to red
myDiv.style.backgroundColor = "yellow"; // Sets background color
myDiv.style.fontSize = "20px"; // Sets font size
</script>
</body>
</html>
Using window.getComputedStyle(element) (Computed Styles)
- Retrieves the actual (computed) styles applied to an element, even styles set by external stylesheets.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Style Object Example</title>
<style>
.highlight { color: red; font-weight: bold; }
</style>
</head>
<body>
<p id="myDiv" class="active">This is the Para 1.</p>
<script>
let myDiv = document.getElementById("myDiv");
myDiv.style.color = "red"; // Changes text color to red
myDiv.style.backgroundColor = "yellow"; // Sets background color
myDiv.style.fontSize = "20px"; // Sets font size
let computedStyle = window.getComputedStyle(myDiv);
console.log(computedStyle.color); // Returns the actual computed color (rgb(255, 0, 0))
</script>
</body>
</html>
Properties of the Style Object
The .style object provides access to various CSS properties using JavaScript.
| JavaScript Property | CSS Equivalent |
| color | color |
| backgroundColor | background-color |
| fontSize | font-size |
| border | border |
| margin | margin |
| padding | padding |
| display | display |
| visibility | visibility |
| opacity | opacity |
Methods of the Style Object
element.style.setProperty() – Set a CSS Property
It allows setting styles using CSS syntax.
myDiv.style.setProperty("background-color", "blue");
element.style.getPropertyValue() – Get a CSS Property
It retrieves the value of a specific CSS property.
let bgColor = myDiv.style.getPropertyValue("background-color");
console.log(bgColor); // Outputs: blue
element.style.removeProperty() – Remove a CSS Property
It deletes a specific style property.
myDiv.style.removeProperty("background-color");Example: Change Styles Dynamically
<!DOCTYPE html>
<html lang="en">
<head>
<title>Style Object Example</title>
<style>
#myDiv {
width: 200px;
height: 100px;
background-color: lightgray;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
let myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "purple";
myDiv.style.color = "white";
myDiv.style.fontSize = "24px";
myDiv.style.border = "2px solid black";
}
</script>
</body>
</html>
Conclusion
- Use
.styleto dynamically change inline styles. - Use
getComputedStyle()to retrieve the last applied styles from CSS files. - Useful for interactive UI effects, animations, and dynamic styling.
Also, Read: Explain the HTML DOMTokenList in JavaScript
Leave Comment