Accessing CSS Styles of an Element in JavaScript

In web development, accessing and manipulating the CSS styles of an HTML element is a common task using JavaScript.

Whether you need to retrieve the current styles, modify them dynamically, or perform actions based on certain styles, JavaScript provides methods and properties to make these tasks straightforward.

This article explores how to get CSS styles of an element using JavaScript.

Getting Computed Styles

To retrieve the computed styles of an element, you can use the getComputedStyle method.

This method returns an object that represents the final, computed values of all the CSS properties applied to the element.

Here's a function demonstrating how to get computed styles:

// Function to get computed styles of an element
function getComputedStyles(elementId) {
  // Get the element by its ID
  const element = document.getElementById(elementId);

  // Get computed styles
  const computedStyles = window.getComputedStyle(element);

  // Log the computed styles
  console.log(computedStyles);
}

In this code:

Example: Getting Computed Styles on Button Click

Let's create a complete example where clicking a button logs the computed styles of a div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Computed Styles Example</title>
  <style>
    /* Optional styling for better presentation */
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    button {
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }

    div {
      padding: 20px;
      border: 2px solid black;
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <button onclick="getComputedStyles('myDiv')">Get Computed Styles</button>
  <div id="myDiv" style="color: blue; font-size: 18px;">This is a div with computed styles.</div>

  <script>
    // Function to get computed styles of an element
    function getComputedStyles(elementId) {
      const element = document.getElementById(elementId);
      const computedStyles = window.getComputedStyle(element);
      console.log(computedStyles);
    }
  </script>
</body>
</html>

In this example:

Accessing Specific Styles

The getComputedStyle method returns an object that allows you to access specific styles using their property names.

For example, to get the color and font-size properties, you can do the following:

// Accessing specific computed styles
const color = computedStyles.color;
const fontSize = computedStyles.fontSize;
console.log(`Color: ${color}, Font Size: ${fontSize}`);

In this code, color and fontSize are variables holding the values of the corresponding styles.

Example: Accessing Specific Computed Styles on Button Click

Let's modify the previous example to log specific computed styles:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Computed Styles Example</title>
  <style>
    /* Optional styling for better presentation */
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    button {
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }

    div {
      padding: 20px;
      border: 2px solid black;
      margin-top: 20px;
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>

  <button onclick="getSpecificStyles('myDiv')">Get Specific Styles</button>
  <div id="myDiv">This is a div with specific computed styles.</div>

  <script>
    // Function to get specific computed styles of an element
    function getSpecificStyles(elementId) {
      const element = document.getElementById(elementId);
      const computedStyles = window.getComputedStyle(element);
      const color = computedStyles.color;
      const fontSize = computedStyles.fontSize;
      console.log(`Color: ${color}, Font Size: ${fontSize}`);
    }
  </script>
</body>
</html>

In this example:

Conclusion

Accessing and understanding the CSS styles applied to an element is crucial for dynamic web development.

The ability to retrieve computed styles using JavaScript opens up possibilities for creating responsive and interactive user interfaces.