DOM

：

：

Element.computedStyleMap() メソッド

　編集：2022.09.20 by T.A.

[Edge]。→

実験的： これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。

element に定義されているスタイルシートを取得し StylePropertyMapReadOnly で返します。

mdn： StylePropertyMapReadOnly インターフェイスで CSSStyleDeclaration の代替となる CSS 宣言ブロックの読み取り専用の表現を提供します。

構文
element.computedStyleMap()
element Element オブジェクト。
戻り値

StylePropertyMapReadOnly インターフェイスです。

例

以下のCSSが組み込んであります： 


 
HTML：
 
<DIV style="background-color:#ddd">
  <SPAN id=IdTest class=Test style="font-size:30px">SPAN要素</SPAN>
</DIV>


 
JavaScript：
 
D=IdTest.computedStyleMap(); //＝[object]：[object StylePropertyMapReadOnly]
	//size＝[number]：346
	//get＝[function]：function get() { [native code] }
	//getAll＝[function]：function getAll() { [native code] }
	//has＝[function]：function has() { [native code] }
	//entries＝[function]：function entries() { [native code] }
	//forEach＝[function]：function forEach() { [native code] }
	//keys＝[function]：function keys() { [native code] }
	//values＝[function]：function values() { [native code] }
DA=D.get('color');            //＝[object]：rgb(255, 0, 0)
	//toString＝[function]：function toString() { [native code] }
DA=D.get('font-size');        //＝[object]：30px
	//value＝[number]：30
	//unit＝[string]：px
	//…
DA=D.get('background-color'); //＝[object]：rgba(0, 0, 0, 0)
	//toString＝[function]：function toString() { [native code] }


 
背景の background-color は親要素での指定なので関係はないようです。









テスト