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


HTMLElement.styleプロパティは、要素のインライン style 属性を単に表す CSSStyleDeclaration オブジェクトを返します。適用されるスタイルルールは無視されます。style 経由でアクセス可能な CSS プロパティのリストについては、CSS プロパティリファレンスを参照してください。

style プロパティは CSS カスケードで style 属性によるインラインスタイル宣言と同じ(かつ最高)優先順位を持つため、1つの特定の要素にスタイルを設定すると便利です。


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


style プロパティは、要素のインライン style 属性で設定された CSS 宣言のみを表し、><head> セクションのスタイルルールまたは外部スタイルシートなどの、他のスタイルルールからのスタイル宣言を表さないため、一般に要素のスタイルに関する学習には役立ちません。 要素のすべてのCSSプロパティの値を取得するには、代わりに window.getComputedStyle() を使用する必要があります。


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

次のコードはすべてのスタイルプロパティの名前と、elt 要素に明示的に設定された値、および継承された '計算値' を表示します。

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:


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



 このページの貢献者: momdo, fscholz, jsx, Shoot, Marsf, Okome
 最終更新者: momdo,