JavaScript DOM CSS

❮ Prev Next ❯

The Document Object Model (DOM) provides a structured representation of web pages, and JavaScript enables dynamic interaction and manipulation of this structure.

One powerful aspect of DOM manipulation is the ability to modify CSS styles of elements directly.

This chapter explores how to work with CSS in the DOM using JavaScript, detailing various methods and properties for accessing and modifying styles, without too much westing of time let deep dive in side.

Accessing and Modifying Inline Styles

Inline styles are styles applied directly to an element using the style property.

JavaScript allows you to access and modify these styles dynamically, providing a way to change the appearance of elements without altering the CSS file. 

// Accessing and modifying inline styles
const box = document.getElementById("box");
box.style.backgroundColor = "blue"; // Changes the background color to blue
box.style.width = "200px"; // Sets the width to 200 pixels
box.style.height = "200px"; // Sets the height to 200 pixels

console.log(box.style.backgroundColor); // Logs 'blue'

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="box">This is Div</div>
    <script>
      const box = document.getElementById("box");
      box.style.backgroundColor = "blue"; // Changes the background color to blue
      box.style.width = "200px"; // Sets the width to 200 pixels
      box.style.height = "200px"; // Sets the height to 200 pixels
      
      console.log(box.style.backgroundColor); // Logs 'blue'
    </script>
  </body>
</html>

Manipulating Classes

Classes are a more flexible way to style elements, as they can be defined in external CSS files and applied to multiple elements.

JavaScript provides methods such as classList.add() classList.remove() classList.toggle() to manipulate the class list of elements. 

// Accessing and modifying inline styles
const box = document.getElementById("box");
box.classList.add("highlight"); // Adds the 'highlight' class to the element
box.classList.remove("highlight"); // Removes the 'highlight' class to the element
box.classList.toggle("highlight"); // Toggle the 'highlight' class to the element

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="box">This is Div</div>
    <script>
      const box = document.getElementById("box");
      box.classList.add("highlight"); // Adds the 'highlight' class to the element
      box.classList.remove("highlight"); // Removes the 'highlight' class to the element
      box.classList.toggle("highlight"); // Toggle the 'highlight' class to the element
    </script>
  </body>
</html>

Reading Computed Styles

Computed styles are the final styles applied to an element, taking into account all CSS rules and inheritance.

The getComputedStyle() method allows you to read these computed styles, providing insight into how styles are rendered by the browser. 

// Reading computed styles
const box = document.getElementById("box");
const computedStyles = window.getComputedStyle(box);

console.log(computedStyles.backgroundColor); // Logs the computed background color
console.log(computedStyles.width); // Logs the computed width

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="box">This is Div</div>
    <script>
      const box = document.getElementById("box");
      const computedStyles = window.getComputedStyle(box);

      console.log(computedStyles.backgroundColor); // Logs the computed background color
      console.log(computedStyles.width); // Logs the computed width
    </script>
  </body>
</html>

Working with CSS Variables

CSS variables (also known as custom properties) provide a powerful way to manage styles

JavaScript can interact with these variables using the style.setProperty()and style.getPropertyValue() methods, allowing dynamic updates to CSS values. 

// Working with CSS variables
const root = document.documentElement;
root.style.setProperty("--main-color", "coral"); // Sets the value of the CSS variable

const mainColor = getComputedStyle(root).getPropertyValue("--main-color");
console.log(mainColor); // Logs 'coral'

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <script>
      const root = document.documentElement;
      root.style.setProperty("--main-color", "coral"); // Sets the value of the CSS variable
      
      const mainColor = getComputedStyle(root).getPropertyValue("--main-color");
      console.log(mainColor); // Logs 'coral'
    </script>
  </body>
</html>

Using the style Element

JavaScript allows you to create and manipulate styleelements, enabling the injection of CSS rules directly into the document.

This can be useful for dynamically generating styles based on user input or application state. 

// Using the `style` element      
const style = document.createElement("style");
style.textContent = `
  #dynamicBox {
    width: 100px;
    height: 100px;
    background-color: orange;
  } 
  `;
document.head.appendChild(style);

const dynamicBox = document.createElement("div");
dynamicBox.id = "dynamicBox";
document.body.appendChild(dynamicBox);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <script>
      const style = document.createElement("style");
      style.textContent = `
        #dynamicBox {
          width: 100px;
          height: 100px;
          background-color: orange;
        } 
        `;
      document.head.appendChild(style);
      
      const dynamicBox = document.createElement("div");
      dynamicBox.id = "dynamicBox";
      document.body.appendChild(dynamicBox);
    </script>
  </body>
</html>

Removing Styles

Removing styles can be achieved by setting style properties to an empty string or by removing class names.

This is useful for resetting elements to their default styles. 

// Removing styles     
const box = document.getElementById("box");
<div id="box" class="highlight" style="background-color: purple; color: green;">This is Div</div>

box.style.backgroundColor = ''; // Removes the inline background color style

box.classList.remove("highlight"); // Removes the 'highlight' class

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="box" class="highlight" style="background-color: purple; color: green;">This is Div</div>

    <script>
      const box = document.getElementById("box");
      box.style.backgroundColor = ''; // Removes the inline background color style
      
      box.classList.remove("highlight"); // Removes the 'highlight' class
    </script>
  </body>
</html>

Manipulating CSS through the DOM in JavaScript offers a powerful way to create dynamic and interactive web pages.

Understanding and leveraging these capabilities is essential for modern web development, enabling the creation of rich, dynamic interfaces.

Let's learn about DOM events in the next chapter.

❮ Prev Next ❯