ホームページ > ウェブフロントエンド > jsチュートリアル > ページの幅と高さを取得するための jQuery メソッドの概要

ページの幅と高さを取得するための jQuery メソッドの概要

php中世界最好的语言
リリース: 2018-04-23 17:36:00
オリジナル
2146 人が閲覧しました

今回はjQueryでページの幅と高さを取得する方法についてまとめてみました。 jQueryでページの幅と高さを取得する際の注意点は何ですか? 以下は実際的なケースです。

ブラウザ表示領域(

ビジュアルエリア)の高さを取得する:

$(window).height();
ログイン後にコピー

ブラウザ表示領域(ビジュアルエリア)の幅を取得する:

$(window).width();
ログイン後にコピー

ページのドキュメントの高さを取得する

$(document).height();
ログイン後にコピー

ドキュメントの幅を取得ページの:

$(document).width();
ログイン後にコピー

ブラウザの現在のウィンドウでのドキュメント本文の高さ:

$(document.body).height();
ログイン後にコピー

ブラウザの現在のウィンドウでのドキュメント本文の幅:

$(document.body).width();
ログイン後にコピー

スクロール バーの垂直高さを取得します。上部 (つまり、上にスクロールされている Web ページの高さ)

$(document).scrollTop();
ログイン後にコピー

スクロール バーを取得します。 左側の垂直幅:

$(document).scrollLeft();
ログイン後にコピー

要素の幅を取得または設定します:

$(obj).width();
ログイン後にコピー

高さを取得または設定します。要素:

$(obj).height();
ログイン後にコピー

要素の上端から

body の上部までの距離: obj.offset() .top; (要素を含む要素にスクロール バーが含まれていない場合) からの距離要素の左端から body の左端まで:
obj.offset().left; (要素を含む要素がスクロール バーなしの場合) 現在の要素の上部の境界から上部の境界までのオフセットを返します。含まれる要素の境界: obj.offset().top (スクロール バーを含む要素の包含要素の場合)
現在の要素の左端からその含まれる要素の左端までのオフセットを返します: obj.offset().left (スクロール バーを含む要素の場合)
obj.offset(). top;
左または上の境界線までスクロールされたピクセル数を設定または返します。要素の。簡単に言えば、スクロール バーの上端または左端を基準とした一致する要素のオフセットを設定または取得することです。これらのピクセルは、要素にスクロールバーがある場合、たとえば、要素の CSS overflow
プロパティが auto に設定されている場合にのみ役立ちます。これらのプロパティは、ドキュメントの または タグ (これはブラウザーによって異なります) でのみ定義され、一緒にスクロールするドキュメントの位置を指定します。これらのプロパティは タグのスクロール量を指定するものではないことに注意してください。これは標準ではありませんが、十分にサポートされている属性です この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

jQueryでループを使用する方法

jQueryは一定の要素数の間隔で線分を追加します

JS+jQueryを使用して登録情報を確認する方法

以上がページの幅と高さを取得するための jQuery メソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート