js中clientWidth、offsetWidth

最新推荐文章于 2025-05-29 09:00:00 发布

原创最新推荐文章于 2025-05-29 09:00:00 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个简单的HTML示例，解释了如何使用JavaScript来获取DOM元素的clientHeight, offsetHeight及body的offsetWidth属性。这些属性分别代表了元素的内容高度加上内边距、元素的总高度（包括内容、内边距和边框）以及窗口的可视宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clientWidth:width+padding2;
offsetWidth:width+padding2+border*2

<div class="box">我是box</div>
 <style>
        *{
            margin: 0;
            padding: 0
        }
    .box{
        width: 200px;
        height: 200px;
        border: 3px solid red;
        padding: 20px;
        margin: 10px;
    }
    </style>
<script>
var box=document.getElementsByClassName("box")[0];
console.log(box.clientHeight)//=>240
console.log(box.offsetHeight)//=>246
console.log(document.body.offsetWidth)//=>窗口可视区域

</script>