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 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 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 How to Update Properties of Pseudo Element :after and :before using Javascript ? In this article, we will learn how to select and update the CSS properties of pseudo-elements ::after and ::before using JavaScript. The HTML elements like <div>, <h1>, <p>, etc. can be easily selected using document.getElementById() and other related JavaScript methods, selecting 4 min read How to Change the Color of HTML Element in JavaScript? Changing the text color of an HTML element using JavaScript enhances the user experience by making content more interactive and visually engaging. By accessing and modifying the element's style properties through the DOM, we can dynamically update font colors based on user actions or events. For exa 2 min read How to Select an Element by ID in JavaScript ? In JavaScript, we can use the "id" attribute to interact with HTML elements. The "id" attribute in HTML assigns a unique identifier to an element. This uniqueness makes it easy for JavaScript to precisely target and manipulate specific elements on a webpage. Selecting elements by ID helps in dynamic 2 min read Like