ホーム > width (全5件)
  • ダイアログボックスのサイズを調整する

    初期化時にダイアログボックスのサイズを設定する。

    /* 幅（省略時は300）と高さ（省略時は'auto'）を指定 */
$( '#dialog1' ).dialog( { width: 500, height: 400 } );

/* 最小幅（省略時は150）と最少高さ（省略時は150）を指定 */
$( '#dialog1' ).dialog( { minWidth: 400, minHeight: 200 } );

/* 最大幅（省略時はfalse）と最大高さ（省略時はfalse）を指定 */
$( '#dialog1' ).dialog( { maxWidth: 800, maxHeight: 600 } );

/* リサイズ不可（省略時はtrue（リサイズ可））に設定 */
$( '#dialog1' ).dialog( { resizable: false } );

    jQuery UIのダイアログボックスで、サイズに関連するプロパティはこの7種類。幅および高さで指定する値はピクセル値（数値だけでよい）、resizableにはtrueまたはfalseを指定する。

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

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