HTML DOM style Property
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 |
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
