ホーム > 領域 (全22件)
  • 要素の高さを設定する

    idがleft-sideの要素の高さを100pxにする。

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

    $( '#left-side' ).attr( 'style', 'height:100px;' );とほぼ同じ効果だが、height関数はほかのstyle属性の値を気にしなくていい。

    キーワード:
  • 要素の高さを取得する

    idがpost-1の要素の高さを取得する。

    var height = $( '#post-1' ).height();

    取得できる高さはピクセル値で、上下のpadding分は含まれていない。例えばその要素の高さが50pxでpaddingが10pxの場合は、取得できる高さの値は50となる（jQuery 1.7.1でIE7～9、Chrome 16、Firefox 9、Safari 5.1、Opera 11.60で確認）。なおheight関数は、$( window ).height()と記述することでブラウザの表示領域の高さを、$( 'body' ).height()とすることでドキュメントの高さ（長さ）を取得できる。

    キーワード:
  • 要素の幅を取得する

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

    キーワード:
  • ページトップへスクロール

    idがpagetopの要素をクリックすると、ページのトップへスクロールする。

    $('#pagetop').click( function() {
	$('html,body').animate({'scrollTop':'0px'},'slow');
	return false;
} );

    html要素はIE7～9、Firefox 9.01、Opera 11.60が動作する（Chrome 16、Safari 5.1はNG）。body要素はChrome 16、Safari 5.1が動作する（IE7～9、Firefox 9.01、Opera 11.60はNG）。このようなことから、htmlとbody要素の両方を指定する必要がある。

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