ホームページ  >  記事  >  ウェブフロントエンド  >  js は、ページ要素とブラウザーのワークスペースの上部の間の距離を取得します。

js は、ページ要素とブラウザーのワークスペースの上部の間の距離を取得します。

不言
不言オリジナル
2018-07-09 17:07:392674ブラウズ

この記事では主に、js 取得ページ要素とブラウザーのワークスペースの上部の間の距離を紹介します。これを必要な友人に共有します。

まず、いくつかの属性を紹介します。 : (現時点では、IE と Firefox のみをテストしました。実際、仕事で最もよく使用しているのは Chrome です)

ロールアップされた Web ページの高さ/幅 (つまり、ページ コンテンツの高さ)ブラウザのスクロールバーがスクロールされると非表示になります)

( ( javascript)

document.body.scrollTop //IE (javascript)

document.body.scrollLeft //IE (jqurey)

$(window).scrollTop() (jqurey

)

$(window).scrollLeft() Webページの作業領域の高さと幅

(javascript) document.documentElement.clientHeight// IE Firefox (jqurey) () の上部と左側からの要素のオフセット値ドキュメント


(javascript)
DOM 要素 object.offsetTop //IE firefox

(javascript) DOM 要素 object.offsetLeft //IE firefox

(jqurey) jq オブジェクトの上部からの距離。作業領域 = のオフセット値ドキュメントの上部からの要素 - ロールアップされた Web ページの高さ

つまり:

ページ要素とブラウザ作業領域の上部の間の距離

= DOM 要素 object.offsetTop

-

document.documentElement.scrollTop

応用例: (私は互換性の心配を避けるために jqurey を使うことに慣れています)

ページ要素とブラウザーのワークスペースの上/左端の間の距離を使用してプロンプトを実装しますページ上のボックス プロンプト情報がさまざまな位置で正しい位置に表示されていることを確認します。コード

の図に示すように、入力ボックスがどこにあってもプロンプトが表示されることがわかります。ボックス情報は常に正しい位置に表示され、プロンプト ボックスがブロックされた場合にはポップアップしませんコード (上記の例の HTML ページは jquery-1.8.2.min.js を引用する必要があります)

上記は次のとおりですこの記事の内容全体が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語ネットにご注目ください。

関連する推奨事項: 現在のドメイン名、URL、相対パスとパラメータを取得し、パラメータを指定するjsメソッドjsネイティブの左スワイプ削除

以上がjs は、ページ要素とブラウザーのワークスペースの上部の間の距離を取得します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。