How to Get Current Value of a CSS Property in JavaScript ?

0 0 1 minute read

In this article, we will see how to get the current value of a CSS property using JavaScript. To get the CSS styles of an element, we will use getComputedStyle() method.

The getComputedStyle() method is used to get all the computed CSS properties and values of the specified element. The use of computed style is displaying the element after styling from multiple sources has been applied. It returns a CSSStyleDeclaration object.

Syntax:

window.getComputedStyle(element, pseudoElement);

Example 1: In this example, we will use the getComputedStyle() method to get the current value of a CSS property.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        How to Get Current Value of a 
        CSS Property in JavaScript? 
    </title> 
  
    <style type="text/css" id="GFG"> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        #box { 
            width: 250px; 
            height: 100px; 
            line-height: 100px; 
            color: white; 
            background-color: rgb(0, 128, 0); 
            display: block; 
            margin-left: auto; 
            margin-right: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>zambiatek</h1> 
  
    <h3> 
        How to Get Current Value of a 
        CSS Property in JavaScript? 
    </h3> 
  
    <div id="box"></div> 
  
    <script> 
        let id = document.getElementById("box"); 
        let stle = window.getComputedStyle(id); 
        document.querySelector('div').textContent  
            = ('background-color: '  
            + stle.getPropertyValue('background-color')); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we can get the current value of a CSS property using the window.getComputedStyle() method in JavaScript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        How to Get Current Value of a  
        CSS Property in JavaScript? 
    </title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        #content { 
            width: 150px; 
            padding: 30px 20px; 
            background-color: green; 
            margin: auto; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        zambiatek 
    </h1> 
  
    <h3> 
        How to Get Current Value of a  
        CSS Property in JavaScript? 
    </h3> 
  
    <div id="content">Welcome to GFG</div> 
    <br> 
  
    <button onclick="Fun()">Get CSS Value</button> 
  
    <pre id="CSSVal"></pre> 
  
    <script> 
        function Fun() { 
            const element = document.querySelector("#content"); 
  
            const value = window.getComputedStyle(element) 
                          .getPropertyValue('background-color'); 
  
            document.getElementById("CSSVal").innerHTML = value; 
        } 
    </script> 
</body> 
  
</html>

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!