JavaScript中clientHeight和offsetHeight、scrollHeight的区别

2023年5月14日 129次阅读 来源: semyin

我们在学习JavaScript时，总会遇见获取各种高度，宽度问题，每次在使用的时候都要去网上查找，今天我整理一些各种js中的高度宽度方法给大家。

1.clientWidth/clientHeight

内容可视区域宽度/高度，也就是说页面浏览器中可以看到内容这个区域的宽度/高度
但是要注意padding是算在里面

2.offsetHeight/offsetWidth

在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。

3.scrollHeight/scrollwidth

scrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。
计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。
Chrome中：
body：
clientHeight = body.padding + body.height（css设置或内容撑大）；
offsetHeight = body.clientHeight + body.border；
scrollHeight = body.padding + 内容的高度(与height样式无关)，但最小值是documentElement.clientHeight
documentElement：
clientHeight = window视窗高度 – 滚动条高度。
offsetHeight = body.offsetHeight + body.margin;
scrollHeight = 内容的高度（与body上的height无关），但最小值是documentElement.offsetHeight
元素上：
offsetHeight = padding + border + height
clientHeight = padding + height - scrollbar.width
scrollHeight = padding+content总高度（滚动条收缩的也算）
样式代码：
<style>
    body{
        width: 1000px;
        height:1000px;
        background: #ccc;
        boder:1px solid red;
        /*body没有border属性*/
        /*margin-top: 20px;*/
    }
    div{
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 1px solid red;
        margin: 20px;
        overflow: auto;
    }
</style>
结构代码：
<div>
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    000000000000000000000000000000000
</div>

js：

<script>
    console.log(document.body.clientHeight) //1000
    console.log(document.body.clientWidth) //1000
    console.log(document.documentElement.clientHeight) //949
    console.log(document.documentElement.clientWidth) //1215
    console.log(document.body.offsetWidth) //1000
    console.log(document.body.offsetHeight) //1000
    console.log(document.documentElement.offsetHeight)  //1028
    console.log(document.documentElement.offsetWidth)   //1215
    console.log('div的offsetWidth为：'+document.getElementsByTagName('div')[0].offsetWidth)  //242
    console.log('div的offsetHeight为：'+document.getElementsByTagName('div')[0].offsetHeight) //242
    console.log('div的clientWidth为：'+document.getElementsByTagName('div')[0].clientWidth)  //223
    console.log('div的clientHeight为：'+document.getElementsByTagName('div')[0].clientHeight)  //240
    console.log('div的scrollWidth为：'+document.getElementsByTagName('div')[0].scrollWidth)  //350
    console.log('div的scrollHeight为：'+document.getElementsByTagName('div')[0].scrollHeight)  //334
</script>
    原文作者：semyin
    原文地址: https://www.jianshu.com/p/850c7a7ce4fd
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞