outerWidthメソッド

outerWidthメソッドは、要素の内側の余白、境界線、およびオプションで外側の余白を考慮した要素の幅の取得と変更を可能にします。重要なのは、取得するのは'計算された幅'の値（computed width）であることです。計算エラーは、ユーザーがページサイズを変更した場合や、要素またはその親要素が非表示になっている場合にも発生する可能性があります。

構文

これが要素の幅を取得する方法です。このメソッドは、外側の余白を考慮するかどうかに応じて、オプションのパラメータとしてtrueまたはfalse （デフォルトはfalse）を受け取ることができます。場合によっては、取得した値が小数になることがあります：

$(selector).outerWidth([include_margin]);

要素の幅を変更するには、数値（例えば400）を渡すことができます。その場合、単位はピクセルになります。または、単位を指定した文字列（例えば'10em'）を渡すこともできます：

$(selector).outerWidth(new value, [include_margin]);

また、指定された関数をセット内の各要素に適用することもできます。この場合、関数の最初のパラメータはセット内の要素のインデックスを受け取り、2番目のパラメータはその特定の要素の現在の幅の値を受け取ります。関数内のthisは現在の要素を指します。要素の幅の値は、関数が返す値に変更されます：

$(selector).outerWidth(function(index, current value of width));

例

比較のために、段落#testの幅について、 widthメソッド、 innerWidthメソッド、およびouterWidthメソッドで取得した情報を出力してみましょう：

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

outerWidthメソッド

構文

例

関連項目