box-sizing: border-box
組み込みの理解です。これは、すべての最新ブラウザーでサポートされている
box-sizing: border-box
プロパティです。 （IE6とIE7は、私が言ったように、最新のブラウザーで煙を吐き出します。）
注：CSS
box-sizing
プロパティはCSS3標準で導入され、2つの値を持つことができます。content
content-box
-CSS2標準に対応し、デフォルト値です。一方、
width
および
height
プロパティはコンテンツの
width
と
height
を指定し、値は含みませんインデント、マージン、境界線、
border-box
新しい値は、
width
と
height
プロパティにマージンと境界線の値を含めるが、マージンは含めないようブラウザに指示し
border-box
。
画面に境界線のある要素を人々に見せ、要素の幅を示すように頼むと、もちろん、境界線の外側の境界線から要素を考慮します。 ただし、これはデフォルトの
content-box
モードのCSSでは機能しません。 通常、CSSの幅と高さには、境界線とフィールド内のコンテンツの幅と高さ（
padding
）のみが含まれます。 その結果、レイアウト（およびjQueryを使用）時に、要素の「実際の」幅を取得するために、左/右マージンの幅と境界線を追加する必要がしばしばあります。
box-sizing: border-box
を使用すると、CSSの幅の表現が変更されます。このモードでは、マージンとボーダーの幅が含まれ、より自然に見えます。 バージョン1.8以前のjQueryは
border-box
使用に応答しませんでしたが、このバグを修正しました。
ただし、
.width()
メソッドによって返される値は変更されていません。 ドキュメントに示されているように、要素のコンテンツの幅を返す/設定します。これは、要素にどの
box-sizing
が指定されているかは関係ありません。 ただし、jQuery 1.8では、
.width()
を使用するたびに
box-sizing
プロパティの値をチェックして、フィールドと境界の値をいつ減算する必要があるかを判断する必要があります。 これは費用のかかる操作になる可能性があります-Chromeでは最大100倍の費用がかかります！ 幸いなことに、ほとんどのコードは
.width()
を頻繁に使用しないため、特別な注意を払う価値がありますが、一度に数十個の要素の幅を取得するコードは悪影響を与える可能性があります。
コードのパフォーマンスに対するこの機能の影響を回避するためのかなり簡単な方法があります。
.width()
.css("width")
代わりに
.css("width")
使用して、該当するCSSルールに従って要素の「実際の」幅を設定します。 これには、jQueryが
box-sizing
プロパティの値を確認する必要はありません。 ただし、
.css("width")
を呼び出すと、末尾に "px"を含む文字列値が返されるため、 結果として数値を取得する場合は、
parseFloat( $(element).css("width") )
を使用する必要があります。
そしてもちろん、上記のすべてが
.height()
完全に適用されます。パフォーマンスの問題を避けるために
.css("height")
を使用してください。
.outerWidth()
セッターの使用
その他の重要なニュース：
.outerWidth()
および
.outerHeight()
メソッドはバージョン1.8で更新され、セッターとして使用できるようになりました。 （jQuery UIはバージョン1.8.4以降、この機能をサポートしていますが、現在ではカーネルでも使用可能です。）.
.outerWidth()
セッターを使用するには、必要な要素の「フル」幅（コンテンツ幅とフィールド幅）を示す引数として数値を渡す必要がありますプラス境界線の幅）。 そして、はい、このメソッドは
box-sizing: border-box
の値も考慮に入れます。その場合は
.css("width")
を使用することになり
.css("width")
。
メソッドが数値ではなくjQueryオブジェクトを返したため、jQuery 1.8で
.outerWidth()
使用に問題がある一部の人々からフィードバックを受け取りました。 これは、たとえば
$(element).outerWidth(0)
を呼び出すと発生する可能性があります。 以前のバージョンでは、これはメソッドの誤った使用です。これは、boolean型の引数の使用のみが文書化され、メソッドが幅を返したためです。 新しいバージョンでは、jQueryは値0を幅の設定値として理解するため、jQueryオブジェクトはセッターの結果として返されます。
APIドキュメントは、jQuery 1.8のすべての変更に従って更新されていますが、jQuery 1.8の発表で既に変更のリストを確認できます。