DOM属性详解：clientHeight, offsetHeight, offsetParent, scrollHeight-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124022953

文章目录

clientHeight
offsetHeight
offsetParent
scrollHeight

参考文档： https://www.w3school.com.cn/jsref/dom_obj_all.asp

clientHeight

element.clientHeight 返回元素的可见高度
element.clientWidth 返回元素的可见宽度
会获取元素宽度和高度，包括内容区和内边距
且返回值没有px单位，都是一个数字，可以直接进行计算
属性是只读的不能修改。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width:100px;
            height: 100px;
            background-color: plum;
            padding: 10px;
            border: powderblue 10px solid;
        }
    </style>
    <script>
        window.onload = function(){
            var box = document.getElementById("box");
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function(){
                alert(box.clientWidth);
            }

        }
    </script>

</head>
<body>
    <button id = "btn1">点我试试</button>
    <br><br>
    <div id ="box">
    </div>
    
</body>
</html>

offsetHeight

element.offsetHeight返回元素的高度。
element.offsetWidth返回元素的宽度。
会获取元素宽度和高度，包括内容区、内边距和边框
没有单位。

offsetParent

element.offsetParent返回元素的偏移容器，获取当前元素的定位父元素。
-可以用来获取当前元素的定位（定位即position属性值不是static）父元素
-会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则返回body

element.offsetLeft ：当前元素相对于其定位父元素的水平偏移量
element.offsetTop ：当前元素相对于其定位父元素的垂直偏移量

scrollHeight

element.scrollHeight 返回元素的整体滚动区域的高度。
element.scrollWidth 返回元素的整体滚动区域的宽度。

element.scrollLeft 获取水平滚动条滚动的距离。
element.scrollTop 获取垂直滚动条滚动的距离。

规律：
当满足scrollHeight - scrollTop == clientHeight说明垂直滚动条滚动到底了。
使用：判断用户是否读完。
注意：由于谷歌浏览器获取的 scrollTop 有小数，所以可能不是严格的等于，可以写成
scrollHeight - scrollTop- clientHeight<1
或者取整
Math.floor(info.scrollHeight - info.scrollTop) == info.clientHeight
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #info{
            width: 300px;
            height: 500px;
            background-color: powderblue;
            overflow: scroll;
        }
    </style>
    <script>
        window.onload = function(){

            /*
            当滚动条滚动倒地的时候表单项可用
            onscroll:该事件会在滚动条滚动的时候触发
            */
           var info = document.getElementById("info");
           var input = document.getElementsByTagName("input");

           info.onscroll = function(){
             if(Math.floor(info.scrollHeight - info.scrollTop) == info.clientHeight ){
                // alert("滚到底了");
                input[0].disabled = false;
                input[1].disabled = false;
            }
           }

        }
    </script>

</head>
<body>
    <p id="info">`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。
`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。

`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。

`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。

`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。
`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。

`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。

`element.scrollHeight`	返回元素的整体滚动区域的高度。
`element.scrollWidth`	返回元素的整体滚动区域的宽度。

`element.scrollLeft`	获取水平滚动条滚动的距离。
`element.scrollTop`	获取垂直滚动条滚动的距离。

规律：
当满足`scrollHeight - scrollTop == clientHeight`说明垂直滚动条滚动到底了。
使用：判断用户是否读完。


</p>
<input type="checkbox" disabled="disabled">我已仔细阅读协议，一定遵守
<input type="submit" value="注册" disabled="disabled">
</body>
</html>