learn2kode.in

Menu

JavaScript Tutorial

Menu

JavaScript Changing Styles (DOM Style Manipulation)

JavaScript allows you to change the appearance of HTML elements dynamically using the DOM. This is called style manipulation. It is commonly used to create interactive effects like highlighting elements, showing or hiding content, changing themes, and responding to user actions.
Changing styles with JavaScript is a core skill for building modern, interactive websites.

Why Change Styles Using JavaScript?

Using JavaScript to change styles helps you:
  • Improve user experience with visual feedback
  • Highlight elements on click, hover, or focus
  • Show or hide sections dynamically
  • Create animations and interactive UI components
  • Build responsive behavior without page reloads
Accessing the style Property
Every HTML element has a style property that lets you apply inline CSS styles.
Example
Copy Text 
<div id="box">Hello World</div>
Copy Text 
const box = document.getElementById("box");

box.style.color = "white";
box.style.backgroundColor = "blue";
box.style.padding = "20px";
CSS properties written with hyphens become camelCase in JavaScript.
CSS Property JavaScript Property
background-color backgroundColor
font-size fontSize
border-radius borderRadius
text-align textAlign
Changing Multiple Styles
You can update multiple styles one by one:
Copy Text 
const heading = document.querySelector("h1");

heading.style.fontSize = "32px";
heading.style.color = "green";
heading.style.textAlign = "center";
Showing and Hiding Elements
JavaScript is often used to control visibility.
Copy Text 
// Hide element
element.style.display = "none";

// Show element
element.style.display = "block";
Other useful properties:
  • visibility: hidden
  • opacity: 0
Changing Styles on User Events
Styles are commonly changed when users interact with elements.
Copy Text 
const btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  btn.style.backgroundColor = "orange";
  btn.style.color = "white";
});
Using classList (Best Practice)
Instead of adding inline styles, it’s better to toggle CSS classes.
JavaScript
Copy Text 
const box = document.getElementById("box");
box.classList.add("active");
box.classList.remove("active");
box.classList.toggle("active");
CSS
Copy Text 
.active {
  background-color: teal;
  color: white;
  transform: scale(1.1);
}
  • Cleaner code
  • Better performance
  • Easier maintenance
Changing Styles for Multiple Elements
Copy Text 
const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.style.border = "2px solid #333";
});
Inline Styles vs Class-Based Styles (Comparison)
Method Inline Styles CSS Classes
Maintainability Low High
Performance Lower Better
Best Practice ❌ Avoid ✔ Recommended
Best Practices
  • Use classList instead of inline styles
  • Keep styling logic in CSS files
  • Use CSS transitions for smooth effects
  • Avoid frequent DOM style changes inside loops
Changing HTML Content
Events & Event Listeners