ホーム > outerWidth (全4件)
  • 要素のpadding分を調整して幅を設定する

    idがleft-sideの要素のpadding分を含んだ幅を100pxにする。

    $( '#left-side' ).outerWidth( 100 );

    idがleft-sideの要素がpadding:5pxの場合、$( '#left-side' ).attr( 'style', 'width:90px;' );と同じ効果になる。なお、左右のpadding値を含まない指定する場合は、width関数を使用する。

    キーワード:
  • 要素の幅（padding分を含む）を取得する

    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()とすることでドキュメントの幅を取得できる。

    キーワード:
 
 
ツールバーへスキップ