JS样式相关的属性clientWidth，offsetLeft，scrollHeight，onscroll

最新推荐文章于 2022-05-04 15:41:33 发布

请问大家代码怎么敲

最新推荐文章于 2022-05-04 15:41:33 发布

阅读量75

点赞数 1

分类专栏： js javaScript 文章标签： js

本文链接：https://blog.csdn.net/liumuye88888/article/details/115639623

版权

js 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javaScript

19 篇文章 0 订阅

订阅专栏

clientWidth
clientHeight
这两个属性可以获取元素的可见宽度和高度
这些属性都是不带px的,返回的都是数字,可以直接进行计算

会获取元素宽度和高度,包括内容区和内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        background-color: aqua;
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 5px solid red;
    }
</style>
<body>
    <div id="box">

    </div>
    
</body>
<script>
    window.onload = function () {
        var div = document.getElementById("box")
        div.onclick = function(){
           console.log(div.clientWidth)//120
           console.log(div.offsetWidth)//130
        }
     
    }
</script>
</html>

offsetWidth
offsetHeight**

获取元素的整个的宽度和高度,包括内容区和内边距和边框

offsetParent
可以用来获取当前元素的定位父元素
会获取当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位,则返回body

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
     
        width: 100px;
        height: 100px;
        border: 5px solid red;
        position: relative;
    }
    #box1{
        margin-left: 20px;
        margin-top: 10px
    }
</style>
<body>
    <div id="box">
        <div id="box1">
         
        </div>
<div>

</div>
    </div>
    
</body>
<script>
    window.onload = function () {
        var div = document.getElementById("box")
        var div2 = document.getElementById("box1")
        console.log(div2.offsetLeft);//20
        console.log(div2.offsetTop);//10
    }
</script>
</html>

scrollHeight
可以获取元素整个滚动区域的高度
scrollWidth
可以获取元素整个滚动区域的宽度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {

        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        overflow: auto;
    }

    #box1 {
        width: 200px;
        height: 300px;
        background-color: yellow;
    }
</style>

<body>
    <div id="box">
        <div id="box1">

        </div>
        <div>

        </div>
    </div>

</body>
<script>
    window.onload = function () {
        var div = document.getElementById("box")
        var div2 = document.getElementById("box1")
      console.log(div2.scrollHeight);//300
      console.log(div2.scrollWidth);//200
    }
</script>

</html>

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

当（scrollHeight - scrollTop == clientHeight）
说明垂直滚动条滚到了头

当（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 {
            background-color: whitesmoke;
            overflow: auto;
            width: 200px;
            height: 300px;
        }
    </style>

</head>

<body>
    <h3>欢迎亲爱的用户注册</h3>
    <p id="info">
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
        亲爱的用户,请仔细阅读以下协议,否则就不要注册!
       
    </p>
    <!-- 如果为表单添加disabled="disabled"则表单项则变成不可用的状态 -->
    <input type="checkbox" name="" id="" disabled="disabled" /> 我已阅读协议
    <br>
    <input type="submit" value="注册"  disabled="disabled"/>
</body>
<script>
    window.onload = function () {
        // 当滚动条滚滚动到底时可以注册
        // onscroll 该事件在元素的滚动条滚动时触发
        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>

</html>

请问大家代码怎么敲

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS样式相关的属性clientWidth，offsetLeft，scrollHeight，onscroll

clientWidthclientHeight这两个属性可以获取元素的可见宽度和高度这些属性都是不带px的,返回的都是数字,可以直接进行计算会获取元素宽度和高度,包括内容区和内边距<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
复制链接

扫一扫