MDN’s new design is in Beta! A sneak peek:

翻譯不完整。請協助 翻譯此英文文件


The property returns a CSSStyleDeclaration object that represents only the element's inline style attribute, ignoring any applied style rules.  See the CSS Properties Reference for a list of the CSS properties accessible via style.

Since the style property has the same (and highest) priority in the CSS cascade as an inline style declaration via the style attribute, it is useful for setting style on one specific element.

Setting style

Styles can be set by assigning a string directly to the style property (as in = "color: blue;" ),which forwards it as = "color:blue;"  , though  it returns a CSSStyleDeclaration object which is read-only.  However, the style property's own properties CAN be used to set styles.  Further, it is easier to use the individual styling-properties of the style property (as in = '...' ) than to use = '...' or elt.setAttribute('style', '...') , unless you wish to set the complete style in a single statement, since using the style properties will not overwrite other CSS properties that may already be set in the style attribute.  

範例 = "color: blue"; // Multiple style properties

elt.setAttribute("style", "color: blue"); // Multiple style properties = "blue";  // Directly

var st =;
st.color = "blue";  // Indirectly

Getting style information

The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets. To get the values of all CSS properties for an element you should use window.getComputedStyle() instead.


var div = document.getElementById("div1"); = ".25in";

The following code displays the names of all the style properties, the values set explicitly for element elt and the inherited 'computed' values:

var element = document.getElementById("elementIdHere");
var out = "";
var elementStyle =;
var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n";


DOM Level 2 Style:


Note: Starting in Gecko 2.0, you can set SVG properties' values using the same shorthand syntax. For example: = 'lime';



 此頁面的貢獻者: jackblackevo
 最近更新: jackblackevo,