概要

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

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

styleを設定する

Styles can be set by assigning a string directly to the style property (as in elt.style = "color: blue;" ),which forwards it as el.style.cssText = "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 elt.style.color = '...' ) than to use elt.style.cssText = '...' 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.

elt.style.cssText = "color: blue"; // Multiple style properties

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

elt.style.color = "blue";  // Directly

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

スタイル情報を取得する

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

Example

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

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

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

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

仕様

DOM Level 2 Style: ElementCSSInlineStyle.style

互換性

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

element.style.fill = 'lime';

関連項目

ドキュメントのタグと貢献者

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