JavaScript でウィンドウのプロパティ (ビューポートの高さ、要素のサイズ、要素の位置) を取得する-jsチュートリアル-php.cn

JavaScript でウィンドウのプロパティ (ビューポートの高さ、要素のサイズ、要素の位置) を取得する

php是最好的语言

リリース： 2018-08-03 09:57:13

オリジナル

5185 人が閲覧しました

ウィンドウのプロパティを取得します

スクロールバーのスクロール距離を表示します

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(&#39;p&#39;)[0];    var stop = document.getElement.getElementsByTagName(&#39;p&#39;)[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>

ログイン後にコピー