要素のスタイル属性値を取得するネイティブ JavaScript メソッド_JavaScript スキル

したがって、スタイルを取得するには、IE の currentStyle と W3C の getPropertyValue を使用する必要があります。
elem.style.attr のスタイル取得メソッドについては説明しません。まず、このオブジェクトは IE 専用であり、グローバル スタイル シートと内部スタイル。IE では、埋め込みスタイルと HTML タグの属性で指定されたオブジェクトの形式とスタイルを介して、要素の CSS 属性値を取得できます。他の標準ブラウザの場合は、W3C も提供します。 getPropertyValue メソッド。このメソッドは少し複雑です。まず、document.defaultView.getComputedStyle を通じて CSS スタイル オブジェクトを取得し、次に、IE かどうかに関係なく、オブジェクトの getPropertyValue を通じてプロパティ値を取得する必要があります。共通点は、要素の Css 属性の最終値を取得することです。これは Css の優先度と同じです。
1 つの違いは、IE のメソッドはキャメル ケース名を通じて取得することです。 Css の属性名（textAlign など）を取得するのに対し、W3C のメソッドは Css 要素の元の属性名（text-align など）から取得するため、W3C のメソッドを使用する場合は簡単な処理が必要です。
これに基づいて、要素の属性値を取得するメソッドをカプセル化できます。メソッドは次のとおりです:

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

function attrStyle(elem,attr){

if(elem.attr){
// スタイルが HTML に存在する場合、最初に取得します
return elem.style[attr];
}else if(elem.currentStyle){
//IE での CSS 属性の最終スタイルを取得します (CSS 優先度と同じ)
return elem.currentStyle[attr];
}else if(document.defaultView && document.defaultView.getComputedStyle){
// CSS 属性の最終スタイルを取得するための W3C 標準メソッド (CSS 優先度と同じ)
//このメソッドは属性の元の形式 (text-align) を取得するため、
attr=attr.replace(/( [A-Z])/g,'-$1') に変換する必要があることに注意してください。 toLowerCase();
//スタイル オブジェクトを取得し、プロパティ値を取得します
return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr); else{
return null;
}
}


『Mastering JavaScript』(第 6 章か第 7 章だったか忘れました) の要素の位置の取得に関するセクションを思い出してください。 document.defaultVies.getComputedStyle について初めて知りました。これは素晴らしい本です。興味のある方はぜひ読んでください。
元のレシピは Mr.Think のブログで公開されています。 //mrthink.net/js-get-cssproperty/