HTML DOM Element style attribute

Definition and usage

style The attribute 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 in <head> Any style properties set in part or any external style sheet.

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 attribute 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 attribute:

element.style.property

Set the style attribute:

element.style.property = value

Attribute value

Value Description
value

Specify the value of the attribute.

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