jQueryオブジェクト .width()

jQueryオブジェクトのwidthメソッドを使うと、HTML要素の幅を取得したり、HTML要素の幅を設定できる。

目次

1. 要素の幅
2. 幅の取得
   1. 戻り値
   2. 引数
   3. 例
3. 幅の設定
   1. 戻り値
   2. 引数
   3. 例
4. 関連項目
5. 参考文献

要素の幅

jQueryオブジェクトのwidthメソッドで取得または設定する幅は要素のコンテンツの幅であり、パディング、ボーダーおよびマージンは含まない。

コンテンツにパディングを含めた要素の幅を取得または設定したい場合は、jQueryオブジェクトのinnterWidthメソッドを使う。

コンテンツにパディングおよびボーダーを含めた要素の幅を取得または設定したい場合は、jQueryオブジェクトのouterWidthメソッドを使う。マージンを含めるかどうかは引数で指定する。

幅の取得

HTML要素の幅を取得する。

jQueryObject.width()

jQueryオブジェクトが複数のHTML要素にマッチする場合は、最初にマッチした要素の幅を取得する。

戻り値

HTML要素の幅を数値で返す。

引数

なし

例

画像の幅を取得する例を次に示す。

<img src="portrait.jpg" id="portrait1">
<p>height: <span id="height"></span></p>
<script>
  const width = $('#portrait1').width();
  $('#width').html(width);
</script>

width:

幅の設定

HTML要素の幅を設定する。

jQueryObject.width(size)

jQueryObject.width(function)

jQueryオブジェクトが複数のHTML要素にマッチする場合は、複数の要素の幅を設定できる。

戻り値

マッチしたHTML要素のjQueryオブジェクトを返す。

引数

jQueryオブジェクトのwidthメソッドには、以下に示す引数を指定できる。

size

要素の幅を数値で指定する。pxやem等の単位を使うこともできる。

function

要素の幅を戻り値として返す関数を指定する。

function()

function(index)

function(index, width)

jQueryオブジェクトが複数のHTML要素にマッチすることがある。それらを区別するため、マッチした要素のインデックス番号（0始まり）が第1引数 index に渡される。

変更前の幅が第2引数 width に渡される。

例

画像の幅を数値で設定する例を次に示す。

<img src="portrait.jpg" id="portrait2">
<script>
  $('#portrait2').width(200);
</script>

画像の幅を関数で設定する例を次に示す。

<img src="portrait.jpg" id="portrait3">
<script>
  $('#portrait3').width(function() {
    return 100;
  });
</script>

関連項目

• CSS width
• jQuery after()
• jQuery animate()
• jQuery attr()
• jQuery each()
• jQuery empty()
• jQuery height()
• jQuery hide()
• jQuery resize()
• jQuery text()

参考文献

• OpenJS Foundation (2025) .width() | jQuery API Documentation