outerWidthメソッド

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

構文

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

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

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

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

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

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

例

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

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

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

javascriptlet 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);

関連項目