? JavaScript DOM CSS

⚡ Quick Overview

JavaScript can access and modify the CSS of HTML elements through the DOM. Using properties like style and classList, you can dynamically change colors, sizes, layouts, and more in response to user actions, events, or conditions. This is the basis of interactive, responsive web pages.

? Key Concepts

Inline Styles via element.style – Set styles directly on an element.
CSS Classes via classList – Add, remove, or toggle predefined CSS classes.
CamelCase Properties – Multi-word CSS properties like background-color become backgroundColor in JavaScript.
Dynamic Styling – Change styles when events happen (clicks, hovers, form input, etc.).
getComputedStyle() – Read an element’s final, calculated styles.

? Syntax and Theory

Every DOM element exposes a style object that represents its inline styles. You can assign values to these properties to change how the element looks:

For example, element.style.color = "red" sets the text color, and element.style.backgroundColor = "yellow" sets the background color.

However, changing many inline styles can become hard to maintain. A better approach is to define reusable CSS classes in your stylesheet and then use element.classList.add(), element.classList.remove(), or element.classList.toggle() to apply or remove those classes.

When you need to read styles that may come from external stylesheets, inline styles, or browser defaults, use getComputedStyle(element) to get the final, computed values.

? Code Examples

✏️ Changing Inline Styles with `style`

This example selects a paragraph using getElementById() and applies several inline styles to it.

? View Code Example

<p id="myPara">Hello World!</p>
<script>
const para = document.getElementById("myPara");
para.style.color = "red";
para.style.fontSize = "20px";
para.style.backgroundColor = "yellow";
</script>

? Using `classList` to Add/Remove Classes

Here, a highlight class is toggled whenever the paragraph is clicked. The CSS class defines the styles in one place, and JavaScript only switches the class on or off.

? View Code Example

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>
<p id="text">Click me to highlight!</p>
<script>
const text = document.getElementById("text");
text.addEventListener("click", function () {
  text.classList.toggle("highlight");
});
</script>

? Changing Styles Dynamically on Button Click

In this example, clicking the button applies a border, padding, and centered text to the paragraph.

? View Code Example

<button onclick="changeStyle()">Change Style</button>
<p id="demo">Watch my style change!</p>
<script>
function changeStyle() {
  const p = document.getElementById("demo");
  p.style.border = "2px solid green";
  p.style.padding = "10px";
  p.style.textAlign = "center";
}
</script>

?️ Interactive Example

Click the button below to see JavaScript change the styles of this box in real time.

? Live Demo Box

I will change my style when you click the button!

? Live Output / Explanation

? What the Examples Do

Inline style example – Immediately changes the paragraph’s text color, font size, and background color when the script runs.
classList.toggle("highlight") example – Each click adds or removes the highlight class, so the paragraph switches between normal and highlighted styles.
changeStyle() example – When the button is clicked, it adds a green border, padding, and centers the text in the paragraph.
Interactive demo box – Uses JavaScript to switch between a default look and a more emphasized, card-like style.

All of these patterns are commonly used in real projects for interactive UIs, such as opening modals, highlighting errors, showing/hiding menus, and toggling dark mode.

? Tips & Best Practices

Prefer classList over many inline style changes to keep your code clean and reusable.
Use camelCase when setting styles in JavaScript (e.g., backgroundColor, fontSize).
Group related styles into CSS classes (like .highlight) instead of repeating them in JavaScript.
Use getComputedStyle(element) when you need to read the actual style applied to an element.
Keep your JavaScript focused on behavior (when styles change) and your CSS focused on design (what the styles are).

? Try It Yourself

Create a <div> with a CSS class and use JavaScript to change its class when a button is clicked.
Build a simple “dark mode” toggle that adds or removes a .dark-mode class on the <body>.
Use style.display = "none" to hide an element and style.display = "block" (or "inline-block") to show it again.
Experiment with getComputedStyle() to log the current color and fontSize of an element to the console.
Combine event listeners (like click and mouseover) with style changes to create interactive hover effects.