一篇弄懂 clientWidth、clientHeight、clientLeft、clientTop的区别！（3）

最新推荐文章于 2024-01-18 01:01:46 发布

小苏(º﹃º )

最新推荐文章于 2024-01-18 01:01:46 发布

阅读量1.6k

点赞数

分类专栏： HTML javascript 文章标签： javascript css css3 html

本文链接：https://blog.csdn.net/qq_45850095/article/details/120871926

版权

javascript 同时被 2 个专栏收录

17 篇文章 3 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

快速理解client之间的区别

简介

1.clientHeight/clientWidth 属性是一个只读属性，它返回该元素的像素高度/宽度，高度/宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条，是一个整数，单位是像素 px。
2.clientTop/clientLeft 属性是一个只读属性，表示一个元素的顶部边框/左边框的宽度，以像素表示。不包括外边距和内边距。

完整代码

以下代码均在Chrome浏览器中测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       .div{
           width: 300px;
           height: 300px;
           padding: 13px;
           margin: 17px;
           border: 11px teal solid;
           background-color: wheat;
       }
        #btn{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="div"></div>
    <button id="btn">点我</button>
</body>
<script>
    let div = document.getElementsByTagName('div')[0]
    btn.onclick=function(){
        // .div(height/width:300 + padding:13*2) == 326
        console.log('clientHeight',div.clientHeight);
        console.log('clientWidth',div.clientWidth);
        // .div(border:11)
        console.log('clientTop',div.clientTop);
        console.log('clientLeft',div.clientLeft);
    }
</script>
</html>

效果如下：
在这里插入图片描述
client(可视区域)相对于offset,scroll来说，比较好理解。

总结

下面将offset、scroll、client的关系以图形的方式来展示：
请添加图片描述
相关文章：
链接: 一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）.
链接: 一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）.

小苏(º﹃º )

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
一篇弄懂 clientWidth、clientHeight、clientLeft、clientTop的区别！（3）

快速了解client系列二级目录二级目录https://juejin.cn/post/6844903861212168200
复制链接

扫一扫