js_javascriptスキルで要素スタイルを正しく取得する方法の詳細説明

js による要素スタイルの取得について説明する前に、スタイルについて簡単に説明します。

スタイルは 3 つあります
外部スタイル 外部スタイル シート
CSS 拡張子付きファイル (別名: (「ハイパーテキスト スタイル シート」ファイル)、その範囲は複数の Web ページ、Web サイト全体、さらには異なる Web サイトにすることができます。 Web ページにリンクした後にのみ適用できます。
埋め込みスタイル内部スタイル シート
Web ページ内のスタイル設定が含まれており、その範囲は埋め込まれた Web ページに限定されます。
インライン スタイル
HTML ドキュメントでは、インライン スタイル シートの書式設定情報が、適用される Web ページ要素の HTML タグに HTML タグのパラメータの属性として直接挿入されます。厳密に言えば、インライン スタイル シートはテーブルではなく、単なる HTML タグです。
同じスタイルが出現する場合、優先順位は埋め込みスタイルよりもインラインであり、埋め込みスタイルは外部スタイルよりも高くなります。
----------------------------------------------- --- ----------------
js がこれら 3 つのスタイルを取得する場合、style はインライン スタイルのみを取得でき、外部スタイルと埋め込みスタイルは取得できないため、currentStyle を使用する必要があります。属性、および currentStyle は FF ではサポートされていません
以下では、FF と IE と互換性があり、スタイルを正しく取得する 2 つのメソッドを紹介します

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

var $=function(id){return document.getElementById(id) };
メソッド 1
/*
* @string id
* @string styleName スタイル名
*/
function getEyeJsStyle(id,styleName){
if($(id).currentStyle){//ie
return $ (id).currentStyle[ styleName];
}else{ //ff
var $arr=$(id).ownerDocument.defaultView.getComputedStyle($(id), null); [styleName];
}
}

方法 2:

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

HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});

getComputedStyle 関数の使用法について教えてください
この関数には 2 つのパラメータがあります。
最初のパラメータは、スタイルを取得する必要がある要素オブジェクトです。 2 番目のパラメータは、:hover、:first -letter、:before などの疑似要素です。
疑似要素が必要ない場合、このパラメータは null です。
getComputedStyle() 関数は document.defaultView オブジェクトからアクセスできます。つまり、この関数は次のように呼び出すことができます。
------ ----- -------------------------------------- ----- -------

ちなみに、ホームページの runtimeStyle 属性、この属性は IE でのみサポートされており、サポートされていません。実行時スタイルの FF
runtimeStyle でサポートされています。 styleの属性と重複するとstyleの属性は上書きされます！
runtimeStyle が指定されている場合、現在表示されているスタイルは runtimeStyle に基づくことを意味します。 runtimeStyle がキャンセルされた場合、現在表示されているスタイルは currentStyle スタイルに復元されます。
ケース:
document.getElementById("eyejs").runtimeStyle.width="400px"; を設定すると、要素の幅は 400px になり、スタイル属性

ケース分析パッケージがオーバーライドされます。ダウンロード