PS:スタイルを設定するのではなく、スタイルを取得することです。要素に対してスタイル値が設定されていない場合、ブラウザによって指定されたデフォルト値が返されます。 (フォーラムソート)
1。要素。スタイル:要素タグのスタイル属性に記述されたスタイル値のみを取得できません。 <style> </style>で定義され、<link href = "css.css">を介してロードされたスタイル属性は取得できません。
コードコピーは次のとおりです。
var ele = document.getElementById( 'ele');
ELE.STYLE.COLOR; //色を取得します
2。WINDOW.GETCOMPUTEDSTYLE():現在の要素のすべての最終CSS属性値を取得できます。
コードコピーは次のとおりです。
window.getComputedStyle( "element"、 "pseudo-class");
このメソッドは、計算されたスタイルの要素と擬似要素の文字列(たとえば ":before")を取得する2つのパラメーターを受け入れます。擬似要素情報が不要な場合、2番目のパラメーターはnullになります。また、document.defaultview.getComputedStyle( "element"、 "pseudo-class")を介して使用することもできます。
コードコピーは次のとおりです。
var ele = document.getElementById( 'ele');
var styles = window.getComputedStyle(ELE、null);
styles.color; //色を取得します
style.lengthを使用して、ブラウザのデフォルトスタイルの数を表示できます。 IE6-8はこの方法をサポートしておらず、次の方法を使用する必要があります。 FirefoxとSafariの場合、色はRGB形式に変換されます。
3。要素。CurrentStyle:IEは専用であり、現在適用されている要素の最終的なCSS属性値(外部リンクCSSファイルを含む、<style>属性をページに埋め込んだなど)を返します。
コードコピーは次のとおりです。
var ele = document.getElementById( 'ele');
var styles = ele.currentstyle;
styles.color;
注:包括的な属性ボーダーなどの場合、IEは未定義です。他のブラウザの一部は値を返し、一部は返されませんが、borderLeftwidthのreturn値などの属性もあります。
4。GetPropertyValue():CSSスタイルの直接プロパティ名を取得します
コードコピーは次のとおりです。
var ele = document.getElementById( 'ele');
window.getComputedStyle(ELE、null).getPropertyValue( 'color');
注:属性名はキャメル形式をサポートしていません。IE6-8はこの方法をサポートしていないため、次の方法が必要です
5。getAttribute():getPropertyValueと同様に、1つの違いはプロパティ名のラクダ形式です
コードコピーは次のとおりです。
var test = document.getElementById( 'test');
window.getComputedStyle(test、null).getPropertyValue( "backgroundcolor");
注:この方法はIE6-8のみをサポートしています。
次のスタイルの取得方法は、IE、Chrome、Firefoxなどと互換性があります。
コードコピーは次のとおりです。
関数GetStyle(ELE){
var style = null;
if(window.getComputedStyle){
style = window.getcomputedStyle(ele、null);
}それ以外{
style = ele.currentstyle;
}
リターンスタイル。
}
jQueryでは、CSS()は一般的にスタイルのプロパティを取得するために使用され、その基礎となる操作はgetComputedStyleおよびgetPropertyValueメソッドを適用します。