JS中的盒子模型_js 有clientright么-CSDN博客

本文链接：https://blog.csdn.net/qq_41989299/article/details/87174689

client系列

属性名	属性值
clientWidth	width+左右padding
clientHeight	height+上下padding
clientLeft	左边框的宽度
clientTop	上边框的高度

`不存在clientRight和clientBottom，这两个属性的属性值是undefined`

获取可视化区域的宽度/高度

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

offset系列

属性名	属性值
offsetWidth	clientWidth+左右border的宽度
offsetHeight	clientHeight+上下border的高度
offsetLeft	当前盒子的外边框距离父级参照物的内边框的左偏移量
offsetTop	当前盒子的外边框距离父级参照物的内边框的上偏移量
offsetParent	获取当前元素的父级参照物

父级参照物：一般情况下，页面中的元素的父级参照物都是body，如果给页面中的某个元素添加position属性（脱离文档流，float是半脱离文档流，所以不能使用float），那么该元素的所有子孙元素的父级参照物都是该元素。

scroll系列

属性名	属性值
scrollWidth	1、内容不溢出的时候scrollWidth=clientWidth 2、内容溢出时scrollWidth≈内容真实的宽度+左padding，如果设置了overflow：onscroll，`scrollWidth=内容真实宽度+左padding`
scrollHeight	1、内容不溢出的时候scrollHeight=clientHeight 2、内容溢出时scrollHeight≈内容真实的高度+上padding，如果设置了overflow：onscroll，`scrollHeight=内容真实高度+上下padding`
scrollTop	当前滚动条纵向卷起的高度
scrollLeft	当前滚动条横向卷去的宽度

以上13个属性，除了scrollTop和scrollLeft这两个属性外，剩下的11个属性都是只读属性
在这里插入图片描述

获取当前元素距离body的偏移量

//第一种方法：while循环
function offset(curEle) {
        let left = curEle.offsetLeft;
        let top = curEle.offsetTop;
        let parent = curEle.offsetParent;
        //判断父级参照物是不是body
        while (parent!===document.body) {
            left += parent .clientLeft + parent .offsetLeft;
            top  += parent .clientTop + parent .offsetTop;
            parent  = parent .offsetParent;
        }
        return {
            left: left,
            top: top
        }
    }
//第二种方法：递归
function offset2(ele) {
        let parent = ele.offsetParent;
        if (parent === document.body) {
            return ele.offsetLeft;
        } else {
            return ele.offsetLeft + parent.clientLeft + offset2(parent);
        }
    }

应用

回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>珠峰培训</title>
    <link rel="icon" href="">
    <!--引入外部文件-->
    <link rel="stylesheet" href="">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #content {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: pink;
            position: fixed;
            bottom: 10px;
            right: 10px;
            text-align: center;
            line-height: 100px;
            display: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="content">回到顶部</div>
<img src="img/1.png" alt="">
<img src="img/1.png" alt="">

<script>
    let btn = document.getElementById("content");
    window.onscroll = function () {
        let winH = document.documentElement.clientHeight || document.body.clientHeight;
        let winT = document.documentElement.scrollTop || document.body.scrollTop;
        if (winT > winH) {
            btn.style.display = "block";
        } else {
            btn.style.display = "none";
        }
    };
    let timer = null;
    btn.onclick = function () {
        clearInterval(timer);
        let winT = document.documentElement.scrollTop;
        timer = setInterval(function () {
            if (winT <= 0) {
                document.documentElement.scrollTop = 0;
                clearInterval(timer);
                return;
            }
            winT -= 50;
            document.documentElement.scrollTop = winT;
            console.log(winT);
        }, 13)
    }
</script>
</body>
</html>