javascript 要素スタイルを取得する nirvana_javascript スキル

CSS 属性値を取得する Javascript メソッド: getComputedStyle および currentStyle

1. 要素のインライン CSS スタイルの場合 (

hello

)

2 では、element.style.color を使用して css 属性の値を直接取得できます。ただし、この方法では外部定義された CSS スタイルを取得できません。IE やその他の標準ブラウザー (Firefox、 Chrome、Opera、Safari) では異なる方法が使用されます。IE ブラウザでは element.currentStyle が使用され、W3C 標準ブラウザでは getComputedStyle が使用されます。

1. IE は要素の外側で定義された CSS 属性の値を取得します: element.currentStyle

currentStyle オブジェクトは要素のスタイル シートを返しますが、スタイル オブジェクトはスタイル シートのみを返します。 style タグ属性を通じて要素に適用されます。

したがって、currentStyle オブジェクトを通じて取得されるスタイル値は、style オブジェクトを通じて取得されるスタイル値と異なる場合があります。

たとえば、段落の color 属性値が、インラインではなく、リンクまたは埋め込まれたスタイルシートを通じて赤 ( red ) に設定されている場合、オブジェクト .currentStyle.color は正しい色を返しますが、オブジェクトstyle.color は値を返しません。ただし、ユーザーが

を指定すると、currentStyle オブジェクトと STYLE オブジェクトの両方が値 red を返します。
currentStyle オブジェクトは、スタイル シート内のスタイルの優先順位を反映します。 HTML では、この順序は次のとおりです:

1) インライン スタイル

2) スタイル シート ルール

3) HTML タグ属性

4) HTML タグ 内部

2. W3C は、要素によって外部で定義された CSS 属性値を取得します: window.getComputedStyle(element, pseudoElt)
要素は必須、HTML 要素
pseudoElt は必須です、そして pseudoElt を取得します要素のクラス スタイル

コードをコピーします コードは次のとおりです。

function getStyle(ノード、プロパティ){
if (node.style[プロパティ]) {
戻りノード.スタイル[プロパティ];
}
else if (node.currentStyle) {
ノードを返します。 currentStyle[property];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle(node, null);
return style.getPropertyValue (プロパティ);
}

}