码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM Element style

❮ Previous ❮ Element Object Reference Next ❯

Examples

Change the color of "myH1":

document.getElementById("myH1").style.color = "red";
Try it Yourself »

Get the value of a "myP"s top-border:

let value = document.getElementById("myP").style.borderTop;
Try it Yourself »

Description

The style property returns the values of an element's style attribute.

The style property returns a CSSStyleDeclaration object.

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

Note 1

You cannot set a style like this:

element.style = "color:red";

You must use a CSS property like this:

element.style.backgroundColor = "red";  
Try it Yourself »

Note 2

JavaScript syntax is slightly different from CSS syntax:
backgroundColor / background-color.

See our Full Style Object Reference.

Note 3

Use this style property instead of the The setAttribute() Method, to prevent overwriting other properties in the style attribute.

See Also:

The CSS Tutorial

The CSS Reference

The Style Object

The HTML <style> tag

Syntax

Return a style property:

element.style. property

Set a style property:

element.style. property = value

Return Value

Type Description
value The value of the specified property.

For example:
element.style.borderBottom = "2px solid red"

Return Value

Type Description
Object The element's CSSStyleDeclaration object.

Browser Support

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

It is fully supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11
❮ Previous ❮ Element Object Reference Next ❯