jQuery1.8_jquery のいくつかの小さな変更の簡単な分析

1. .width() メソッドと .height() メソッド

1.8 では、css 属性 box-sizing のサポートが追加されています。1.7.2 との違いに注意してください。バージョン 1.7.2 以前では、box-sizing が定義されているかどうかに関係なく、border-box は、パディングとボーダーを除いた、ボックス モデル内の要素コンテンツの幅または高さを返します。

1.8以降は異なります。css属性box-sizing: box-borderが設定されている場合、width()で返される値がcssで設定した値と異なる場合があります。たとえば、

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

box -sizing: border-box;ボックス;
幅: 500 ピクセル;
パディング: 5 ピクセル;
>

🎜> console.log(w)





div[id=container] の box- のサイズ設定は border-box に設定されます (Firefox 14.1 はまだ border-box をサポートしていないため、-moz-border-box を使用してください)。

width:500px の設定に加えて、padding と border もそれぞれ 5px に設定されます。各ブラウザの印刷結果は以下の通りです

IE6/7 : 500

IE8/9/10:480

Safari5/6: 480

Chrome21/Firefox14: 480

IE6/7 はボックス サイズ変更をサポートしておらず、出力は依然として 500 です。ただし、この使いやすさをサポートするブラウザの出力結果は 480 (ボックス モデルのボーダーとパディングが削除される) です。したがって、1.8 では、box-sizing 属性の使用によって生じる幅と高さの変化に注意する必要があります。

2. .outerWidth メソッドと .outerHeight() メソッド

バージョン 1.7.2 以前では、outerWidth/outerHeight はゲッターとしてのみ機能します。 true が渡されない場合は、要素の幅または高さ (パディングとボーダーを含む) が返されます。 true が渡された場合 (もちろん数値 1 を渡すこともできます)、戻り値にマージンを加えた値が返されます。

1.8以降ではsetter関数があり、取得時にマージンを計算したい場合はtrueを渡すことしかできませんが、数値1などを渡すと処理が行われてしまうため、数値を渡すことはできません。 jQuery によって内部的に要素の幅と高さを設定します。そして返されるのは数値ではなく、jQuery オブジェクトです (他の jQuery セッターと同じです)。