jQuery outerWidth（）にはCSSのアウトラインが含まれていますか？

Question

驚いたことに、私はjQuery documentationでこの質問に対する答えを見つけることができませんでした。私は理解して

、アウトラインはスペースを取りませんspecs

こと概要によると、彼らはコンテンツ

の上に描かれている。しかし、まだ、私は別の見て混乱していますアウトラインで再生するときの要素の幅の結果

Answer 1

簡単なテストでは、これは当てはまりません。 jqueryのバージョン1,2,3のすべては、このことを考慮していない - outerWidth()はoutline Sを変化させるために同じまま：

$('.outlined').text(function() { return $(this).outerWidth(); })

.outlined { 
 
    width:50px; 
 
    height:50px; 
 
    border:1px solid #f00; 
 
    margin-top:10px; 
 
} 
 

 
.outlined:nth-child(2) { outline: 2px solid #000; } 
 
.outlined:nth-child(3) { outline: 3px solid #333; } 
 
.outlined:nth-child(4) { outline: 4px solid #666; } 
 
.outlined:nth-child(5) { outline: 5px solid #999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="outlined"></div> 
 
    <div class="outlined"></div> 
 
    <div class="outlined"></div> 
 
    <div class="outlined"></div> 
 
    <div class="outlined"></div> 
 
</div>

Answer 2

アウトラインが境界ルールの上に適用されます。したがって、outerWidth（）には、jQueryドキュメントからわかるように、計算のアウトラインは含まれていません。

埋め込みと境界を含む、一致する要素のセットの最初の要素の現在の計算幅を取得します。

概要は言及されていません。

ので、輪郭線を含む幅を計算するために、明示的に追加する必要があります。

parseFloat($(elem).outerWidth())+parseFloat($(elem).css('outline-width')); 

注：あなたは余白を含め幅の要素を取ることにした場合でも、あなたは得られないでしょう輪郭幅の値はouterWidth(true)を使用するだけです。輪郭幅を手動で追加する必要があります。

Answer 3

jquery関数.outerWidth（）には、CSSのアウトラインとマージンのプロパティは含まれていません。パディングの&境界CSSのプロパティが含まれています。