DOM

：

：

HTMLElement.style プロパティ

　編集：2022.10.02 by T.A.

[Edge]○。読取専用。→

element のインライン スタイルを取得／設定します。

取得は CSSStyleDeclaration オブジェクトです。

設定ではそのままスタイルシートの記述した文字列でも可能です。

style 経由でアクセス可能な CSS プロパティのリストについては、 を参照してください。style プロパティは CSS カスケードで style 属性によるインライン スタイル宣言と同じ（かつ最高の）優先順位を持ちます。

構文
element.style
element HTMLElement。
値

取得値： CSSStyleDeclaration。

設定値： 文字列でよいようです。

CSSStyleDeclaration オブジェクト：

その要素のインラインの style 属性で定義された属性に割り当てられた値を持つ、すべてのスタイル プロパティのリストになります。

スタイルの設定：

このプロパティは読み取り専用と考えられていますが、style に直接文字列を代入することで、インライン スタイルを設定することができます。この場合、その文字列は CSSStyleDeclaration.cssText に転送されます。この方法で style を使用すると、その要素のインライン スタイルをすべて完全に上書きします。

したがって、他のスタイルの値を変更せずに要素の特定のスタイルを追加したい場合は、一般に CSSStyleDeclaration オブジェクトの個別のプロパティを設定したほうがうまく行きます。例えば、element.style.backgroundColor = "red" のようにします。

スタイル宣言は null または空文字列を設定することでリセットすることができます。例えば elt.style.color = null のようにします。

¶省く

関連

element.computedStyleMap()。Window.getComputedStyle()。

例
mdnより

HTML： 

<div style="color:red" id="myElement">..</div>

JavaScript： 

var element = document.getElementById("myElement");
var elementStyle = element.style;
取得と設定

HTML： 

<SPAN id=IdTest style="color:red">SPAN要素</SPAN>

JavaScript： 

D=IdTest.style //＝[object]：[object CSSStyleDeclaration]

詳細	//0＝[string]：color
	//accentColor＝[string]：
	//additiveSymbols＝[string]：
	//alignContent＝[string]：
	//alignItems＝[string]：
	//alignSelf＝[string]：
	//alignmentBaseline＝[string]：
	//all＝[string]：
	//animation＝[string]：
	//animationDelay＝[string]：
	//…
	//zIndex＝[string]：
	//zoom＝[string]：
	//cssText＝[string]：color: red;
	//length＝[number]：1
	//parentRule＝[object]：null
	//cssFloat＝[string]：
	//…



IdTest.style="color:blue" //設定。
テスト