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