浏览器 dom 解读

发表于 更新于 分类于 本文字数： 576 阅读时长 ≈ 1 分钟

window 对象

  1. window.screenX，window.screenY

    window.screenX 和window.screenY 只读属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距(单位像素)
    在扩展屏幕测试没有效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
        
        <div id="id1">显示window.screenX，window.screenY</div>
        <button onclick="fun()">btn</button>
        <script type="text/javascript">
            function fun(){
              const div= document.getElementById("id1")
              div.innerText=`x:${window.screenX},y:${window.screenY}`
            } 
        </script>
    </body>
    </html>

  2. window.innerHeight，window.innerWidth

    window.innerHeight 和 window.innerWidth 只读属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）,
    放映的是当前窗口的可是大小,屏幕放大会减小可是区域的大小,这两个属性值包括水平滚动条本身的的高度和垂直滚动条本身的宽度。

  3. window.outerHeight，window.outerWidth

    window.outerHeight 和 window.outerWidth 只读属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）

  4. window.scrollX，window.scrollY

    window.pageXOffset 属性和 window.pageYOffset属性，是 window.scrollX 和 window.scrollY 别名。
    window.scrollX 属性返回页面的水平滚动过的距离，window.scrollY 属性返回页面的垂直滚动过的距离，单位都为像素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
        <body style="overflow:scroll;">
        <div style="margin: 3rem;">
            <button onclick="fun1()">get scroll change</button>
            <button onclick="fun2()">x scroll</button>
            <button onclick="fun3()">y scroll</button>
            <div id="id1" /></div>
            <div id="id2" /></div>
            <div id="id3" /></div>
        </div>

        <script type="text/javascript">
            function fun1() {
                const div = document.getElementById("id1")
                div.innerText = `x:${window.scrollX},y:${window.scrollY}`
            }

            function fun2() {
                const div = document.getElementById("id2")
                let i = "";
                for (let index = 0; index < 1000; index++) {
                    i = i.concat(`${index}&nbsp;`)
                }
                console.log(i)
                div.innerHTML = i
            }

            function fun3() {
                const div = document.getElementById("id3")
                let i = "";
                for (let index = 0; index < 1000; index++) {
                    i = i.concat(`${index}<br/>`)
                }
                console.log(i)
                div.innerHTML = i
            }
        </script>
    </body>