9. 获取元素尺寸

就是获取元素的 "占地面积"

1.offsetWith 和 offsetHeight

offsetWidth ：获取的是元素内容 + padding + border 的宽度
offsetHeight ：获取的是元素内容 + padding + border 的高度

2.clientWidth 和 clientHeight

clientWidth ：获取的是元素内容 + padding 的宽度
clientHeight ：获取的是元素内容 + padding 的高度

注意:

获取到的尺寸是没有单位的数字
当元素在页面中不占位置的时候，获取到的是 0
- display: none; 元素在页面不占位
- visibility: hidden; 元素在页面占位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            padding:10px;
            border:5px solid red;
            background-color: yellow;
            box-sizing: border-box;
            /* display: none; */

            margin:100px; //外边距不会算入
        }
    </style>
</head>
<body>

    <div id="box">

    </div>
    <script>
        // console.log(getComputedStyle(box).width)

        // console.log(box.style.width)
        //offset* (border+padding+content)
        console.log(box.offsetWidth,box.offsetHeight)

        //注意
        /*
          1. 单位是数字类型
          2. box-sizing 计算方法不变(border+padding+content)
          3. display:none 拿不到
        */
        //client* (padding+content)
        console.log(box.clientWidth,box.clientHeight)
    </script>
</body>
</html>

10. 获取元素的偏移量

就是元素在页面上相对于参考父级的左边和上边的距离

offsetParent

获取元素的偏移量参考父级
其实就是假设你要给一个元素 绝对定位 的时候
它是根据谁来进行定位的
那么这个元素的偏移量参考父级就是谁

offsetLeft 和 offsetTop

获取的是元左边的偏移量和上边的偏移量
offsetLeft ：该元素相对于参考父级的左侧偏移量
offsetTop ：该元素相对于参考父级的上侧偏移量

clientLeft和clientTop

内容距离自己左上角的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width: 500px;
            height: 500px;
            background:yellow;
            overflow: hidden;

        }
        #myparent{
            width: 300px;
            height: 300px;
            background:blue;
            overflow: hidden;
            
        }
        #child{
            width: 100px;
            height: 100px;
            background:red;
        }
        div{
            margin:50px;
        }

        ul{
            width: 200px;
            height: 200px;
            padding:20px;
            border:10px solid black;
            background:red;
            margin:50px;
            border-left-width:50px;
            border-top-width: 50px;
        }
    </style>
</head>
<body>

    <div id="box">
        <div id="myparent">
            <div id="child"></div>
        </div>
    </div>


    <ul id="list"></ul>
    <script>
        console.log(child.offsetLeft,child.offsetTop)
        console.log(myparent.offsetLeft,myparent.offsetTop)
        console.log(box.offsetLeft,box.offsetTop)


        /*
          参考点：是定位父级（什么定位都可以）
          如果父级元素都没有定位， 偏移量相对于body
        */


        console.log(list.clientLeft,list.clientTop)
    </script>
</body>
</html>

11. 获取浏览器窗口尺寸

我们之前学过一个 innerWidth 和 innerHeight
他们获取到的是窗口包含滚动条的尺寸
下面我们学习两个不包含滚动条的尺寸获取方式
document.documentElement.clientWidth ：可视窗口的宽度
document.documentElement.clientHeight ：可视窗口的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width: 2000px;
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
        console.log("宽度",innerWidth)
        console.log("高度",innerHeight)
        
        
        console.log("宽度",document.documentElement.clientWidth)
        console.log("高度",document.documentElement.clientHeight)
    </script>
</body>
</html>

案例懒加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        ul li {
            overflow: hidden;
            height: 150px;
        }

        ul li img {
            float: left;
            width: 80px;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <ul id="list">

    </ul>
    <script>
        var arr1 = [{
                name: "哆啦A梦：大雄的宇宙小战争2021",
                url: "https://pic.maizuo.com/usr/movie/c151962e41cb282f09b7855261841da7.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "坏蛋联盟",
                url: "https://pic.maizuo.com/usr/movie/594ded98490b61549be7ecb5a9355b79.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "暗恋·橘生淮南",
                url: "https://pic.maizuo.com/usr/movie/d8419057142d94750cfcbaa69f5fd16b.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "海底小纵队：洞穴大冒险",
                url: "https://pic.maizuo.com/usr/movie/e6ee44927d2e3370dcf251c2627ef6d4.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "我要我们在一起",
                url: "https://pic.maizuo.com/usr/movie/ea32c21b19817f0a9d7d799c1262ac8d.jpg?x-oss-process=image/quality,Q_70"
            }
        ]

        var arr2 = [{
                name: "神秘海域",
                url: "https://pic.maizuo.com/usr/movie/a17030216bc281dfc04c0964bd911497.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "边缘行者",
                url: "https://pic.maizuo.com/usr/movie/afdef208d7b72a950b164c007e8a0837.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "五个扑水的少年",
                url: "https://pic.maizuo.com/usr/movie/635c53b2cbd14987870df6b3434e2a28.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "神奇动物:邓布利多之谜",
                url: "https://pic.maizuo.com/usr/movie/46015aa8e08a661e7c559b6e7407ce08.jpg?x-oss-process=image/quality,Q_70"
            },
            {
                name: "开心超人之英雄的心",
                url: "https://pic.maizuo.com/usr/movie/36e714044b7e5d555a81a74f816bde99.jpg?x-oss-process=image/quality,Q_70"
            }
        ]

        renderHTML(arr1)

        function renderHTML(arr) {
            // list.innerHTML += arr.map(function (item) {
            //     return `<li>
            //      <img src="${item.url}" alt="">
            //      <h3>${item.name}</h3>
            //     </li>`
            // }).join("")
            //会闪退一下
            
            //优化方案
            for(var i=0;i<arr.length;i++){
                var oli = document.createElement("li")
                oli.innerHTML = `<img src="${arr[i].url}" alt="">
                    <h3>${arr[i].name}</h3>`

                list.appendChild(oli)
            }
        }
        isLoading = false
        window.onscroll = function(){
            // console.log("1111")
            var listHeight = list.offsetHeight
            var listTop = list.offsetTop

            // console.log(listHeight+listTop)

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            var windowHeight = document.documentElement.clientHeight

            // console.log()
            if(isLoading) return
            if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<50){
                console.log("到底了")
                isLoading = true


                //渲染下一页数据，让数据加载的慢一点
                setTimeout(function(){
                    renderHTML(arr2)

                    isLoading = false //下一次到底事件继续触发
                },1000)
            }
        }
    </script>
</body>
</html>

三.懒加载及相关9-11 （P93-P96）

9. 获取元素尺寸

1.offsetWith 和 offsetHeight

2.clientWidth 和 clientHeight

10. 获取元素的偏移量

offsetParent

offsetLeft 和 offsetTop

clientLeft和clientTop

11. 获取浏览器窗口尺寸

案例 懒加载

案例懒加载