JavaScript スタイル オブジェクトと CurrentStyle オブジェクトのケース スタディ

1. スタイルオブジェクト

スタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されているドキュメント要素からアクセスできます。スタイル オブジェクトは、インライン スタイル、つまり要素タグ内のスタイル属性の値を取得します。

例：

<style type="text/css">#div{color:gray;}</div>//内部スタイル <div id="div" style="color:red;"></div>//インライン スタイル document.getElementById('id').style.color;//値は赤です

2. currentStyle オブジェクト

CSS カスケード ルールに従って要素に適用されたすべてのスタイル宣言 (内部、外部、インラインを含む) の最終スタイルを返します。要素の計算されたスタイルを取得するために CurrentStyle の使用をサポートするのは、IE と Opera だけです。 getComputeStyle() メソッドは、現在の要素で使用されている CSS 属性値を取得できます。

var div=window.getComputeStyle("div",null).color; //最初のパラメータはターゲット要素、2番目のパラメータは疑似クラスです（必須、疑似クラスがない場合はnullに設定）

スタイルオブジェクトとの違い:

getComputeStyle() は読み取り専用で、取得することはできますが設定することはできません。一方、スタイルは読み取りと設定が可能です。

スタイルが設定されていない要素の場合、getComputedStyle() はオブジェクト内の長さプロパティの値を返し、スタイル オブジェクト内の長さは 0 になります。

ブラウザによって currentStyle オブジェクトのサポートが異なるため、互換性に対処する必要があります。

var div = document.getElementById('div');

var colorStr = null;

if(div.currentStyle){//IEと互換性あり

       colorStr = div.currentStyle;

}それ以外{
colorStr = window.getComputedStyle(div,null);

}

var col=colorStr.color; //divのカラー属性値を取得する

3. 例（ドラッグ可能なレイヤー）

CurrentStyle オブジェクト

スタイルオブジェクト

これで、JavaScript スタイル オブジェクトと CurrentStyle オブジェクトの詳細なケース分析に関するこの記事は終了です。js スタイル オブジェクトと CurrentStyle オブジェクトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。