其它样式相关属性

最新推荐文章于 2022-10-16 22:27:17 发布

周白卿

最新推荐文章于 2022-10-16 22:27:17 发布

阅读量172

点赞数

分类专栏： JavaScript学习笔记文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_51088023/article/details/125885794

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

clientWidth和clientHeight

语法：元素.clientWidth; 元素.clientHeight

这两个属性可以获取元素的可见宽度和可见高度
这两个属性获取的高度和宽度都是不带px的，返回的是一个数字，可以直接进行运行算
获取到的高度和宽度包括内容区和内边距，不包括滚动条
这两个属性都是只读的，不能修改

alert(box1.clientWidth);
alert(box1.clientHeight);

offsetWidth和offsetHeight

语法：元素.offsetWidth; 元素.offsetHeight

这两个属性可以获取元素的整个高度和宽度，包括内容区、内边距和边框

alert(box1.offsetWidth);   
alert(box1.offsetHeight);

offsetParent

语法：元素.offsetParent

该属性可以获取当前元素的定位父元素
会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则返回body

alert(box1.offsetParent);

offsetLeft和offseTop

语法：元素.offsetLeft; 元素.offsetTop

这两个属性可以获取当前元素相对于其定位父元素的水平偏移量（offsetLeft）和当前元素相对于其定位父元素的垂直偏移量（offseTop ）

alert(box1.offsetLeft);   
alert(box1.offsetTop)

scrollWidth和scrollHeight

语法：元素.scrollWidth; 元素.scrollHeight

这两个属性可以获取整个滚动区域的宽度和高度

alert(box1.scrollWidth);   
alert(box1.scrollHright)

scrollLeft和scrollTop

语法：元素.scrollLeft; 元素.scrollTop

这两个属性可以获得水平滚动条滚动的距离（scrollLeft）和垂直滚动条滚动的距离（scrollTop ）
当满足 scrollHeight-scrollTop==clientHeight 时，说明垂直滚动条到底了
当满足 scrollWidth-scrollLeft==clientWidth 时，说明水平滚动条到底了

alert(box1.scrollLeft);   
alert(box1.scrollTop)

遵守协议练习

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        #info{
            width: 300px;
            height: 500px;
            background-color: yellow;
            overflow: auto;
        }
    </style>
    <script>
        window.onload = function () {
            //当垂直滚动条滚动到底时，使表单项可用
            //onscroll事件：该事件会在元素的滚动条滚动时触发

            //获取info元素
            var info = document.getElementById("info");
            //获取表单项
            var inputs = document.getElementsByTagName("input");
            //为info绑定滚动条滚动事件
            info.onscroll = function(){
                //检查滚动条是否滚动到底
                if(info.scrollHeight-info.scrollTop==info.clientHeight){
                    //使表单项可用
                    //disabled属性可以设置一个元素是否禁用
                    //如果设置为true，则元素禁用
                    //如果设置为false，则元素可用
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                }
            };
        };
    </script>
</head>

<body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
        亲爱的用户，请仔细阅读以下协议，否则无法注册
    </p>
    <!-- 如果为表单项添加disabled="disabled",则表单项将变成不可以的状态 -->
    <input type="checkbox" disabled/>我已仔细阅读协议
    <input type="submit" value="注册" disabled>
</body>

</html>