Latest web development tutorials
 

HTML DOM style Propery

< Element Object

Example

Add a red color to an <h1> element:

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

Before setting the style:

Hello World!

After setting the style:

Hello World!

Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The style property returns a CSSStyleDeclaration object, which represents an element's style attribute.

The style property is used to get or set a specific style of an element using different CSS properties.

Note: It is not possible to set styles by assigning a string to the style property, e.g. element.style = "color: red;". To set the style of an element, append a "CSS" property to style and specify a value, like this:

element.style.backgroundColor = "red";   // set the background color of an element to redTry it

As you can see, the JavaScript syntax for setting CSS properties is slightly different than CSS (backgroundColor instead of background-color).

For a list of all available properties, see our Style Object Reference.

Note: The style property only returns the CSS declarations set in the element's inline style attribute, e.g.
<p style="color: red;">. It is not possible to use this property to get information about style rules from the <head> section in the document or external style sheets.

However, you can access the <style> element from <head> by using document.getElementsByTagName():

var x = document.getElementsByTagName("STYLE")[0];   // get the first <style> element Try it

Note: It is recommended to use the style property instead of the element.setAttribute("style", "...") method, because the style property will not overwrite other CSS properties that may be specified in the style attribute.


Browser Support

Property
style Yes Yes Yes Yes Yes

Syntax

Return style properties:

element.style.property

Set style properties:

element.style.property=value

Property Values

Value Description
value Specifies the value of the specified property. For example, for the borderBottom property:

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

Technical Details

Return Value: A CSSStyleDeclaration object, representing an element's style attribute
DOM Version Dom Level 2 CSS

Examples

More Examples

Example

Get the value of a <p> element's top-border:

var x = document.getElementById("myP").style.borderTop;

The result of x will be:

5px solid red
Try it Yourself »

Related Pages

CSS Tutorial: CSS Tutorial

CSS Reference: CSS Properties

HTML DOM Reference: Style Object Reference

HTML Reference: HTML <style> tag


< Element Object