idがleft-sideの要素のpadding分を含んだ幅を100pxにする。
$( '#left-side' ).outerWidth( 100 );
idがleft-sideの要素がpadding:5pxの場合、$( '#left-side' ).attr( 'style', 'width:90px;' );
と同じ効果になる。なお、左右のpadding値を含まない指定する場合は、width関数を使用する。
idがleft-sideの要素のpadding分を含んだ幅を100pxにする。
$( '#left-side' ).outerWidth( 100 );
idがleft-sideの要素がpadding:5pxの場合、$( '#left-side' ).attr( 'style', 'width:90px;' );
と同じ効果になる。なお、左右のpadding値を含まない指定する場合は、width関数を使用する。
idがpost-1の要素の幅(padding分を含む)を取得する。
var width = $( '#post-1' ).outerWidth();
/* margin分を含んだ幅を取得する */
var width = $( '#post-1' ).outerWidth( true );
取得できる幅はピクセル値で、左右のpadding分を含む(padding分を含まない幅はwidth関数を使用)。さらにパラメータとしてtrueを指定すると、左右のmargin分を含んだ幅を取得できる。
idがleft-sideの要素の幅を100pxにする。
$( '#left-side' ).width( 100 );
$( '#left-side' ).attr( 'style', 'width:100px;' );
とほぼ同じ効果だが、width関数はほかのstyle属性の値を気にしなくていい。なお、左右のpadding値を含めた値を指定する場合は、outerWidth関数を使用する。
idがpost-1の要素の幅を取得する。
var width = $( '#post-1' ).width();
/* おまけ:幅ではなく先頭要素そのものを取得する */
var divs = $( 'div' );
var div0 = divs.width( '' );
取得できる幅はピクセル値で、左右のpadding分は含まれていない(padding分を含んだ幅はouterWidth関数を使用)。例えばその要素の幅が100pxでpaddingが10pxの場合は、取得できる幅の値は100となる(jQuery 1.7.1でIE7~9、Chrome 16、Firefox 9、Safari 5.1、Opera 11.60で確認)。なおwidth関数は、$( window ).width()
と記述することでブラウザの表示領域の幅を、$( 'body' ).width()
とすることでドキュメントの幅を取得できる。