ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript でウィンドウのプロパティ (ビューポートの高さ、要素のサイズ、要素の位置) を取得する
スクロールバーのスクロール距離を表示します
2つの値を同時に追加することは不可能であるため、互換性が混乱します。同時に
IE8 と IE8 未満では互換性なし
window.pageXOffset/pageYOffset
document.body/documentElement.scrollLeft/scrollTop
カプセル化の互換性方法、スクロール ホイールが回転していることを確認します。 away getScrollOffset()
互換性の問題を解決するために、関数をカプセル化しましょう:
<script type="text/javascript"> function getScrollOffset() { if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset } else{ return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop, } } } </script>
ビューポートのサイズを表示
奇妙なモードのブラウザに適用可能(下位互換性) )
標準モード、どのブラウザも互換性があります
IEおよびIE8以下とは互換性がありません
window.innerWidth/innerHeight
document.documentElement.clientWidth/clientHeight
do cument.body.clientWidth/clientHeight
互換性メソッドをカプセル化し、ブラウザのビューポート サイズを返します getViewportOffset()
互換性の問題を解決するために、関数をカプセル化しましょう:
<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return { w : window.innerWidth, h : window.innerHeight } }else{ if(document.compatMode ==="BackCompat") { return { w : document.body.clienWidth, h : document.body.clientHeight } }else{ return { w : document.documentElement.clientWidth, h : document.documrntElement.clientHeight } } } </script>
View要素の幾何学的サイズ
domEle.getBoundingClientRect();
非常に良い互換性
このメソッドは、left、top、right、bottom およびその他の属性を持つオブジェクトを返します。 left と top は要素の左上隅の X 座標と Y 座標を表し、right とbottom は要素の右下隅の X 座標と Y 座標を表します。
高さと幅の属性は古いバージョンの IE では表示されません (人為的な解決策: それらを個別に減算して取得します)
返された結果は「リアルタイム」ではありません
スクロール バーをスクロールさせます
ウィンドウには3つのメソッドがあります
x軸とy軸の位置をスクロールするscroll(x,y)、scrollTo(x,y)
スクロールバーをスクロールさせます距離を累積する代わりに現在位置 (この 2 つのメソッドはまったく同じです)
scrollBy(); 累積スクロール距離
3 つのメソッドは同様の機能を持ち、使用方法は x、y を渡すことです。コーディネート。つまり、スクロール バーを現在の位置までスクロールさせます。
違い:scrollBy() は前のデータに基づいて蓄積されます。
例:scroll() ページ位置決め関数を使用します。
例: すばやく読むには、scrollBy() を使用します。
演習:
自動的にページをめくることができる小さなリーダーを作ります。
<!DOCTYPE html><html><head> <title>Document</title></head><body>文本内容 <p style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</p> <p style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</p></body><script type="text/javascript"> var start = document.getElement.getElementsByTagName('p')[0]; var stop = document.getElement.getElementsByTagName('p')[1]; var timer = 0; var key = true; //加锁,防止连续点start产生累加加速 start.onclick = function() { if(key) { timer = setInterval(function() { window.scollBy(0,10); },100); key = false; } } stop.onclick = function() { clearInterval(timer); key = true; }</script>
要素のサイズを表示(視覚的に)
dom.offsetWidth,dom.offsetHeight
要素の位置を表示
dom.offsetLeft 、ドム。 offsetTop
配置された親のない要素の場合、ドキュメントを基準とした相対座標を返します。配置された親要素の場合、最も近い配置された親を基準とした相対座標を返します。
dom.offsetParent
最も近い位置にある親を返します。そうでない場合は、bodyを返し、body.offsetParentはnullを返します
例: ドキュメントを基準とした要素の座標を検索します getElementPosition
関連記事:
js メソッドでブラウザの高さ、ウィンドウの高さ要素サイズのオフセット属性を取得
ウィンドウのサイズと位置を取得するコード共有の Javascript 実装
関連動画:
以上がJavaScript でウィンドウのプロパティ (ビューポートの高さ、要素のサイズ、要素の位置) を取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。