innerWidthメソッド

メソッド innerWidth は、 要素の内部パディングを含む幅の取得と変更を可能にします。 重要な点は、これが'計算された値'の幅 (computed width) を取得するということです。 計算エラーは、ユーザーがページのサイズを変更した場合や、 要素またはその親要素が非表示の場合にも発生する可能性があります。 幅の値は要素のボーダーの厚みを考慮しません。

構文

要素の幅を取得します。場合によっては 取得される値が小数になることがあります：

javascript$(セレクタ).innerWidth();

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

javascript$(セレクタ).innerWidth(新しい値);

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

javascript$(セレクタ).innerWidth(function(セット内のインデックス, 現在の幅の値));

例

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

html<p id="test">テキスト</p>
<p id="out1"></p>
<p id="out2"></p>

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

javascriptlet w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

10px の差が確認できるはずです。これは、 左右の内部パディングの合計値です。

関連項目