widthメソッド

widthメソッドは要素の幅を取得・変更することができます。ここで取得するのは'計算後の値'（computed width）であることに注意してください。 css('width')メソッドとは異なり、単位のない数値（例：400）を返すため、数学的な計算に便利です。 このメソッドは、CSSプロパティのbox-sizingの指定に関わらず、要素のコンテンツ幅を取得します。 これに伴う不便を避けるためには、css('width')の使用が推奨されます。 また、ユーザーがページサイズを変更した場合や、要素またはその親要素が非表示の場合にも計算誤差が発生することがあります。 この幅の値には、パディングやボーダーの値は含まれません。

構文

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

javascript$(セレクター).width();

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

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

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

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

例

divをクリックしたときに、widthメソッドを使ってその幅を40pxに変更し、さらにcssを使って背景色を緑に変更してみましょう：

html<div id="test"></div>

css#test {
  width: 90px; 
  height: 80px;
  background: red; 
  color: white;
  margin-top: 10px; 
  cursor: pointer;
}

javascript$('#test').one('click', function() {
  $(this).width(40).css({
    cursor: 'auto',
    backgroundColor: 'green'
  });
});

関連項目