JavaScript element.style Property

February 8, 2021 10:45 am IST

You are Here:

JavaScript element.style Property

The element.style property gets or sets the inline style of an element.

Set CSS Inline Style

When setting, you should specify the individual CSS properties of style attribute which overrides the existing inline styles.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>I'm red</p> <script> var elem = document.getElementsByTagName("p")[0]; elem.style.color = "red"; </script> </body> </html>

Run

Syntax

element.style

Return Values

Value	Explanation
Object	Returns an object representing the inline style of an element.

Get CSS Inline Style

When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p style="color:red">I'm red</p> <p>Click on the button to get the color of the above paragraph.</p> <button onclick="myFunction()">Click Me</button> <p id="point"></p> <script> var x = document.getElementById("point"); var elem = document.getElementsByTagName("p")[0]; function myFunction(){ x.innerHTML = "Color is " +elem.style.color; } </script> </body> </html>

Run