JavaScript元素可视区client系列

最新推荐文章于 2023-04-03 00:38:29 发布

01xm

最新推荐文章于 2023-04-03 00:38:29 发布

阅读量102

点赞数

分类专栏： JavaScript 文章标签： js javascript 前端

本文链接：https://blog.csdn.net/Bon_nenul/article/details/118026877

版权

JavaScript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

元素可视区cilent系列

cilent翻译过来就是客户端，我们使用cilent系列的相关属性来获取元素可视区的相关信息，通过cilent系列的相关属性可以动态获取到元素的边框大小和元素大小。

cilent系列属性	作用
element.cilentTop	返回元素上边框的大小
element.cilentLeft	返回元素左边框的大小
element.cilentWidth	返回自身包括padding、内容区的宽度、不含边框，返回数值不带单位
element.cilentHeigh	返回自身包括padding、内容区的高度、不含边框，返回数值不带单位

与offset系列相关属性区别就是返回的宽度和高度不含边框

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: blue;
        border: 10px solid green;
    }
</style>
<body>
    <div class="box"></div>
    <script>
        var box = document.querySelector('.box')
        console.log(box.clientWidth) // 200px 
    </script>
</body>