ネイティブjsの幅と高さの取得方法とjqueryの幅と高さの取得方法の関係の比較_javascriptスキル

注: 1. 高さを取得する状況は幅を取得する状況と同じであるため、以下では幅を取得する状況についてのみ説明します。
2. 以下で説明するすべてのメソッドと属性によって返される値には単位がありません。
3. 説明の便宜上、以下の状況を略語で表します:

obj -> ネイティブ JS の DOM オブジェクトを表します; JQuery の JQuery オブジェクトを表します
width -> obj.style .width
OffsetWidth -> obj.offsetWidth
$width -> obj.width()
$innerWidth -> obj.innerWidth()
$outerWidth -> obj.outerWidth()
padding -> オブジェクトのpadding-leftとpadding-rightの合計を表します
border -> オブジェクトのborder-left-widthとborder-right-widthの合計を表します

関連プロパティネイティブJSの幅を取得するのはwidthとoffsetWidthです。 width の取得メソッドは obj.style.width で、オブジェクトの幅をインラインで設定した場合のみ取得可能で、それ以外の場合は空文字列が返されます。 offsetWidth によって取得される値は、JQuery のオブジェクトによって取得される externalWidth と同じです。 offsetWidth は非標準ですが、十分にサポートされているプロパティです。

JQuery には、width()、innerWidth()、outerWidth() という幅を取得する 3 つのメソッドがあります。具体的な使用方法は、obj.width()、obj.innerWidth()、obj.outerWidth() です。 width() はオブジェクトのコンテンツ幅を取得し、innerWidth() はオブジェクトのコンテンツ幅とパディング幅の合計を取得し、outerWidth() はボーダー、パディング幅、コンテンツ幅を含む幅を取得します。

これら 5 つのメソッドの関係は次のとおりです。

width = $width;
offsetWidth = ボーダー パディング幅; = ボーダー パディング幅;

これら 5 つの方法は、Firefox、Chrome、Opera、Safari、IE6、IE7、IE8、IE9 と互換性がありますが、次の 2 つの問題があります。 1. 幅が設定されていない。 Chrome が初めてページを開くと、取得された幅がすべて間違っています。 2 回目に開くと、結果は Firefox と一致します。 2. IE6で幅と高さが設定されていない場合、スクロールバーは表示されません。