js基础知识（三十）--操作样式的其他方式_js操作样式的方式有哪些-CSDN博客

本文链接：https://blog.csdn.net/weixin_47928499/article/details/126337771

一、操作样式的其他方式
clientHeight（clientWidth）:用来获取盒子内部大小（包含内边距和内容区）
offsetWidth（offsetHeight）:用来获取盒子可见框的大小（内容区、内边距和边框）
offsetParent:获取当前元素的定位父元素，定位父元素是离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body
offsetLeft:用来获取当前元素相对于其定位元素（就是offsetParent）的左侧偏移量
offsetTop:用来获取当前元素相对于其定位元素（就是offsetParent）的上偏移量

scrollHeight、scrollWidth:用来获取元素的滚动区域大小
scrollTop：垂直滚动条的滚动的距离（可修改其值，也就是修改其滚动条的位置）
scrollLeft：水平滚动条滚动的距离
当scrollHeigth-scrollTop === clientHeigt 说明垂直滚动条到底了
当scrollWidth-scrollLeft===clientWidth说明水平滚动条到底了

以下是针对以上知识进行的小练习

在这里插入代码片<!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>
        #info {
            width: 300px;
            height: 200px;
            overflow: auto;
            background-color: springgreen;
        }
    </style>
</head>

<body>
    <h2>欢迎注册网站</h2>
    <p id="info">
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
        亲爱的用户，请一定要遵守我们的协议
    </p>
    <input disabled type="checkbox">我已仔细阅读，并同意以上协议
    <input disabled type="submit" value="注册">

    <script>
        /*
        当协议的滚动条到底时，使两个input变得可用
        */
        //获取id为info的p元素
        let info = document.getElementById('info');
        // 获取两个input
        let inp = document.getElementsByTagName('input');

        // onscroll 会在元素的滚动条滚动的时候触发
        info.onscroll = function () {
            // 检查垂直滚动条是否到底
            if (info.scrollHeight - info.scrollTop === info.clientHeight) {
                //进入判断说明滚动条已经滚动到底，是两个input可用
                // disabled 属性可用用来设置元素是否可用，它需要一个布尔值，如果是true，则表示不可用，如果是false则表示可用
                inp[0].disabled = false;
                inp[1].disabled = false;
            }
        };
    </script>
</body>

</html>