HTML DOM Element style attribute

Definition and Usage

style property returns the value of the element's style attribute as a CSSStyleDeclaration object.

The CSSStyleDeclaration object contains all inline style properties of the element. It does not contain the <head> Any style properties set in any partial or external style sheets.

Point 1

You cannot set such styles:

element.style = "color:red";

You must use such CSS properties:

element.style.backgroundColor = "red";

Try it yourself

Point 2

The JavaScript syntax is slightly different from the CSS syntax:

backgroundColor / background-color

See our Complete Style Object Reference Manual.

Point 3

Use this style property instead of setAttribute() Methodto prevent overwriting other properties in the style attribute.

See also:

CSS Tutorial

CSS Reference Manual

Style Object

HTML <style> Tag

Example

Example 1

Change the color of "myH1":

document.getElementById("myH1").style.color = "red";

Try it yourself

Example 2

Get the value of the top border of "myP":

let value = document.getElementById("myP").style.borderTop;

Try it yourself

Syntax

Return the style property:

element.style.property

Set the style property:

element.style.property = value

Property value

Value Description
value

Specify the value of the property.

For example:

element.style.borderBottom = "2px solid red"

Return value

Type Description
Object the CSSStyleDeclaration object of the element.

Browser support

element.style It is a DOM Level 2 (2001) feature.

All browsers fully support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support