各種ブラウザに対応した手書きJavaScriptのgetStyle関数（要素のスタイルを取得）_javascriptスキル

HTML 要素の計算されたスタイルを取得するには、常に多くの互換性の問題がありました。Firefox と Webkit (Chrome、Safari) は W3C 標準メソッド getComputedStyle() をサポートしていますが、IE6/7/ は異なります。 8 は標準メソッドをサポートしていませんが、それを実装するためのプライベート プロパティ (currentStyle) があり、IE9 と Opera の両方がそれをサポートしています。これら 2 つのメソッドと属性を使用すると、基本的にほとんどの要件を満たすことができます。

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

var getStyle = function( elem, type ) {
ウィンドウで 'getComputedStyle' を返しますか? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};

ただし、適応型の幅と高さの場合、currentStyle を使用して計算値を取得することはできません。auto を返すことしかできません。この問題を解決するには、いくつかの方法があります。私が以前に考えたのは、標準メソッドをサポートしていないブラウザでも計算された幅と高さを取得できるように、clientWidth/clientHeight からパディング値を減算することでした。数日前、Situ Zhengmei が別の方法を使用しているのを見ました。 getBoundingClientRect() メソッドを使用してページ上の要素の位置を取得し、左から右を引いたものが幅となり、下から上を引いたものが高さになります。彼のコードにいくつかの小さな変更を加えました。最終的なコードは次のとおりです:

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

var getStyle = function( elem, style ) {
ウィンドウで 'getComputedStyle' を返します ?
getComputedStyle( elem, null )[style] :
function(){
style = style.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});

var val = elem.currentStyle[スタイル];

if( val === 'auto' && (style === "width" || style === "height") ){
var rect = elem.getBoundingClientRect();
if( style === "width" ){
returnect.right - rect.left 'px';
}else{
returnect.bottom - rect.top 'px';
}
}
return val;
}();
};

// このメソッドを呼び出します
var test = document.getElementById( 'test' ),
// 計算された幅を取得します
tWidth = getStyle( test, 'width' );

新しい質問、要素の幅または高さが em または % 単位を使用している場合、getComputedStyle() によって返される値は em または % を自動的に px 単位に変更しますが、currentStyle は変更せず、フォント サイズの場合は を使用します。 em を単位として、Opera では 0em を返します。本当に怖いです。

その後、使用中に予期しない互換性の問題がいくつか見つかりました。今日、元のコードを最適化し、いくつかの一般的な互換性の問題に対処しました。

JavaScript では、「-」(ダッシュまたはハイフン) はマイナス記号を表し、CSS では、padding-left、font-size などの多くのスタイル属性にこの記号が含まれているため、次の場合コードが JavaScript に表示されます。これはエラーです:

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

elem .style .margin-left = "20px";

正しい書き方は次のとおりです:

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

elem.style.marginLeft = "20px";

ここでは、CSS の下線を削除し、一般に「camel」として知られる下線の直後の文字を大文字にする必要があります。 case" JavaScript を使用して要素の CSS スタイルを設定または取得する場合でも、記述メソッドはキャメル ケースで記述する必要があります。ただし、CSS には詳しくても JavaScript には詳しくない初心者の友人の多くは、常にこのような低レベルの間違いを犯します。replace の高度な使用法を使用すると、CSS 属性のアンダースコアをキャメルケース記述で簡単に置き換えることができます。

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

var newProp = prop.replace( /-(w) /g, function( $, $1 ){
return $1.toUpperCase();
});

float の場合、これは JavaScript の予約語です。JavaScript で要素の float 値を設定または取得する別の方法は、標準ブラウザでは cssFloat であり、IE6/7/8 では次のとおりです。スタイルフロート。

top、right、bottom、left に明示的な値がない場合、一部のブラウザはこれらの値を取得するときに auto を返しますが、auto 値は正当な CSS 属性値ですが、私たちが望むものではありません。結果は 0px になるはずです。

IE6/7/8 で要素の透明度を設定するには、filter:alpha(opacity=60) のようなフィルターを使用する必要があります。IE9 は両方の書き込み方法を直接サポートします。要素の透明度を取得するための互換性も実装されており、opacity を使用する限り、ブラウザーのすべての要素の透明度の値を取得できます。

IE6/7/8 における要素の幅と高さの取得については、以前の記事で紹介したので、ここでは繰り返しません。もう 1 つ注意すべき点は、要素のスタイルが style inline を使用して記述されている場合、または style 属性が JavaScript を使用して設定されている場合、次のメソッドを使用して要素の計算されたスタイルを取得できることです:

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

var height = elem.style.height;

このメソッドは getComputedStyle や currentStyle で属性値を読み取るよりも高速なので、最初に使用する必要があります。もちろん、前提条件はインライン書き込みによってスタイルが設定されていることです (インライン スタイルを設定するための JavaScript も設定されています)。最適化された最終コードは次のとおりです:

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

var getStyle = function( elem, p ) {
var rPos = /^(left|right|top|bottom)$/,
ecma = "getComputedStyle" in window,
// アンダースコアを次のようにキャメルケースに変換します。padding-left = >paddingLeft
p = p.replace( /-(w)/g, function( $, $1 ){
return $1.toUpperCase();
});
// float の処理
p = p === "float" ? (ecma ? "cssFloat" : "styleFloat" ) : p;

return !!elem.style[p]
elem.style[ p] :
ecma ?
function(){
var val = getComputedStyle( elem, null )[p];
// 上、右、下、左が auto if( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}() :
function( ) {
var wirelesscasinogames.com val = elem.currentStyle[p];
// IE6/7 で要素を取得する/ 8
の幅と高さ if( (p === "width" || p === "height") && val === "auto" ){
var rect = elem.getBoundingClientRect() ;
return ( p === "width" ? rect.right - rect.left : rect.bottom - rect.top ) "px";
}
// IE6/7 で要素を取得する8
の透明度 if( p === "opacity" ){
var filter = elem.currentStyle.filter;
if( /opacity/.test(filter) ){
val = filter .match( /d / )[0] / 100;
return (val === 1 || val === 0) val.toFixed(0) : val.toFixed(1);
}
else if( val === unknown ){
return "1";
}
}
// 上、右、下、左が自動である場合を処理します
if ( rPos.test(p) && val === "auto" ){
return "0px";
}
return val;
}();
};

以下は呼び出しの例です:

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

<script><P>var box = document.getElementById( "box" );<BR> alert( getStyle(box, "width") ); // "500px"<P>alert( getStyle(box, "background-color") ); // "rgb(0, 0, 0)" / "#000"<BR>alert( getStyle(box, "opacity") ); // "0.6"<BR>alert( getStyle(box, "float") ); // "none"<BR></スクリプト><BR><BR></script>