CSS属性値を取得するJavaScriptメソッド:getComputedStyleおよびcurrentStyle
1。要素のインラインCSSスタイル(<div style = "color:#369"> hello </div>)の場合、element.style.colorを使用して、CSS属性の値を直接取得できます。
2。ただし、外部から定義されたCSSスタイルを取得することは不可能です。さらに、IEブラウザで使用される方法は、他の標準ブラウザー(Firefox、Chrome、Opera、Safari)とは異なります。 IEブラウザはElement.CurrentStyleを使用し、W3C Standard BrowserはgetComputedStyleを使用して取得します。
1。IEは、要素:element.CurrentStyleで外部から定義されているCSS属性値を取得します
currentStyleオブジェクトは要素のスタイルシートを返しますが、スタイルオブジェクトは、スタイルタグ属性を介して要素に適用される埋め込みスタイルのみを返します。
したがって、currentStyleオブジェクトを介して取得されたスタイル値は、スタイルオブジェクトを介して得られたスタイル値とは異なる場合があります。
たとえば、段落の色のプロパティ値が、埋め込まれている代わりにリンクまたは埋め込みスタイルシートを介して赤(赤)に設定されている場合、オブジェクト.currentStyle.colorは正しい色を返し、オブジェクトスタイル。Colorは値を返すことができません。ただし、ユーザーが<p style = "color: 'red'">を指定した場合、CurrentStyleとStyleオブジェクトの両方が値をREDに返します。
CurrentStyleオブジェクトは、スタイルシートのスタイルの優先順位を反映しています。 HTMLでは、この順序は次のとおりです。
1)インラインスタイル
2)StyleSheetルール
3)HTMLタグ属性
4)HTMLタグの内部定義
2。W3C外部から定義されたCSS属性値を取得:window.getComputedStyle(要素、pseudoelt)
要素が必要、HTML要素
要素の擬似クラススタイルを取得するには、Pseudoeltが必要です
コードコピーは次のとおりです。
関数getStyle(node、property){
if(node.style [Property]){
node.style [Property]を返します。
}
else if(node.currentstyle){
node.currentStyle [Property];
}
else if(document.defaultView && document.defaultView.getComputedStyle){
var style = document.defaultView.getComputedStyle(node、null);
return style.getPropertyValue(プロパティ);
}
nullを返します。
}