How to Get Current Value of a CSS Property in JavaScript ? Last Updated : 09 Jan, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will see how to get the current value of a CSS property using JavaScript. Below are the approaches used to Get Current Value of a CSS Property in JavaScript: Table of Content Inline StyleUsing the getComputedStyle() methodApproach 1: Inline StyleInline styles are styles that are present in the HTML in the style attribute. To get inline styles, you can use the style property. Example: In this example, we are getting Inline Style CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Get CSS Property Value - Examples</title> <style> #exampleElement { width: 200px; height: 100px; background-color: #3498db; color: #fff; text-align: center; line-height: 100px; } </style> </head> <body> <div id="exampleElement" style="background-color: #e74c3c;">Example Element</div> <button onclick="showColor()">Show Color</button> <p id="colorDisplay"></p> <script> function showColor() { let element3 = document.getElementById("exampleElement"); let backgroundColor3 = element3.style.backgroundColor; document.getElementById("colorDisplay").innerText += "\nColor: " + backgroundColor3; } </script> </body> </html> Output: Approach 2: Using the getComputedStyle() methodIt 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>GeeksforGeeks</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;"> GeeksforGeeks </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: Comment More infoAdvertise with us Next Article How to Get Current Value of a CSS Property in JavaScript ? V vkash8574 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to get property descriptors of an object in JavaScript ? Here, we are going to discuss the property descriptors of an Object in JavaScript. The Object.getOwnPropertyDescriptor() method returns an object describing a specific property on a given object. A JavaScript object can be created in many ways and its properties can be called by using property descr 2 min read How to get font properties of particular element in JavaScript ? Given a string element and the task is to get the font properties of a particular element using JavaScript. Approach: Store a string to the variable.Then use element.style.property to get the propertyValue of that element. Example 1: This example gets the font-family of the element [id = 'GFG']. htm 2 min read How to Change CSS Properties using JavaScript EventListner Methods ? In this article, we will be using JavaScript to update the web page's CSS styling by taking input from the user. Generally, we have seen a few webpages update the various styling properties dynamically by taking the user input that enhances the user interaction with the webpage, along with improving 3 min read How to remove CSS property using JavaScript? To remove CSS property using JavaScript, we have different methods. In this article, we will learn how to remove CSS property using JavaScript. Below are the Methods used to remove CSS property using JavaScript: Table of Content Using CSS removePropertyUsing the setProperty methodMethod 1: Using CSS 2 min read How to get the width of device screen in JavaScript ? Given an HTML document that is running on a device and the task is to find the width of the working screen device using JavaScript. Example 1: This example uses window.innerWidth to get the width of the device screen. The innerWidth property is used to return the width of the device. HTML<!DOCTYP 2 min read How to Add an Active Class to the Current Element Using JavaScript? We can make use of JavaScript to add an active class to the current element by directly manipulating its class list. This involves identifying the element that triggered the interaction, removing the active class from any previously active elements, and then applying the active class to the current 3 min read How to read CSS rule values with JavaScript? DOM (Document Object Model) object can read and manipulate CSS rules. We can use the following approaches to read all the Embedded CSS rules using JavaScript. Using getElementsByTagName() MethodUsing window.getComputedStyle() MethodApproach 1: Using the getElementsByTagName() MethodUse document.getE 3 min read Throwing an Error "cannot read property style of null" in JavaScript In this article, we will see how we may receive an error "cannot read property style of null" in JavaScript, along with understanding the cause to get this error with the help of an example, and thereafter we will try to understand how we may correct it with certain small changes in the code snippet 3 min read How to get the Width of Scroll bar using JavaScript? Given an HTML document, the task is to get the width of the scrollbar using JavaScript. Approach:Create an element (div) containing a scrollbar.OffsetWidth defines the width of an element + scrollbar width.ClientWidth defines the width of an element.So scrollbar can be defined as width = offsetWidth 3 min read How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com 4 min read Like