width()

widthメソッドで要素の幅を求めることができます。

$("p").width()

css(‘width’) との違いはcssメソッドが「400px」のように単位を一緒に返すのに対して、widthメソッドは「400」といった数値を返します。そのため数値計算などをする場合にはwidthメソッドのほうが向いているでしょう。

このメソッドはwindowとdocumentに対しても利用できます。

$(window).width();//ブラウザの幅(viewport)を返す

$(document).width();//Webページの幅を返す。

引数に数値を指定することで要素の幅を変更できます。

$("div").width(100)

数値以外に単位を含んだ値でも高さを変更できます。

$("div").width("100px")

引数に関数を指定することで関数の返り値を高さに設定することができます。関数内では第１引数で通し番号を、第２引数で元の要素の幅を利用できます。

$("p").width(function(index,width){
    return width+100;
});

このコードでは、p要素の幅を現在の幅に100足したものに変更しています。

paddingを含んだ要素の幅はinnerWidth()で、paddingとborderを含んだ要素の幅はouterWidth()で、paddingとborder、marginを含んだ幅はouterWidth(true)で取得できます。

登録日 : 2012年10月16日最終更新日 : 2012年10月16日

jQuery リファレンス