在html里，width与height是最常用也是最基础的两个属性，因此，在js里，我们也经常需要操作这两个属性。js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清楚这三者之间的区别，经常望着这三个属性满脸问号，不知道该用哪个。所以今天就来看一下这三个属相的区别。

JUST SHUTUP AND SHOW ME YOUR CODE!!

ok，不多说话，看代码。

<style>

    .out{

       width:100px;

       height:100px;

       background:red;

    }

</style>

<body>

    <div class="out"></div>

</body>

我们这里创建了一个宽100，高100的红色方块，没有border，没有margin，也没有padding。我们先看这种情况下三个属性的值

var out = document.querySelector('.out');

console.log(out.clientHeight);   //100

console.log(out.offsetHeight);  //100

console.log(out.scrollHeight);  //100

恩，值都一样，似乎看不出来什么，现在我们加一个padding

<style>

    .out{

       width:100px;

       height:100px;

       background:red;

       padding:20px;

    }

</style>

<body>

    <div class="out"></div>

</body>

方块更大了，我们看一下这种情况下三个属性的值

var out = document.querySelector('.out');

console.log(out.clientHeight);   //140

console.log(out.offsetHeight);  //140

console.log(out.scrollHeight);  //140

恩，值依然都相同，都是可视区高度+padding(不是content的高度+padding，原因一会说)，现在我们再加一个border

<style>

    .out{

       width:100px;

       height:100px;

       background:red;

       padding:20px;

       border:10px solid black;

    }

</style>

<body>

    <div class="out"></div>

</body>

方块外面多了一个10像素的边框，我们再看一下三个属性的值

var out = document.querySelector('.out');

console.log(out.clientHeight);   //140

console.log(out.offsetHeight);  //160

console.log(out.scrollHeight);  //140

注意，这时候发生变化了，clientHeight和scrollHeight没变化，offsetHeight变成了160！

观察到这里我们可以得到一个简易的结论：

clientHeight = 可视区高度 + padding

offsetHeight = content高度 + padding + border

scrollHeight = 可视区高度 + padding

仔细，仔细观察上面的结论(表述未必完全准确，待会会解释),scrollHeight与clientHeight一样(没有滚动的情况下)，先不说，看offsetHeight与clientHeight。

offsetHeight相比clientHeight多了boder的宽度，然而可视区高度与content高度又有什么不同呢？

看下面的图,我强制给方块添加了滚动条

<style>

    .out{

       width:100px;

       height:100px;

       background:red;

       padding:20px;

       border:10px solid black;

       overflow:scroll;

    }

</style>

<body>

    <div class="out"></div>

</body>

此时的三个属性值为

var out = document.querySelector('.out');

console.log(out.clientHeight);   //128

console.log(out.offsetHeight);  //160

console.log(out.scrollHeight);  //128

绿色的线表示可视区高度，蓝色的线表示content的高度

由于方块出现了滚动条，滚动条占用了一定的大小，可视区因此变小了，所以此时的方块，可视区高度 < content高度

了解了这一点，我们就知道，offsetHeight并不是仅仅比clientHeight多了border的宽度，即使没有border，但是有滚动条的情况下，clientHeight是要小于offsetHeight的

下面再来看scrollHeight

为外面的方块添加一个子方块

<style>

    .out{

       width:100px;

       height:100px;

       background:red;

       padding:20px;

       border:10px solid black;

    }

    .inner{

       width:200px;

       height:200px;

       background:blue;

    }

</style>

<body>

    <div class="out">

        <div class="inner"></div>

    </div>

</body>

此时的scrollHeight的值为：

var out = document.querySelector('.out');

console.log(out.scrollHeight);  //220

值为220，即scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值

注：当有滚动条时，padding-bottom和padding-right是无效的，不会进行计算，也不会进行渲染（chrome除外）

再次注意，这里计算时，对父元素的padding值应该只计算一个(即使父元素上下padding都设置了值)，可以认为只计算padding-top值(实验证明确实计算的是padding-top值，如果不设置padding-top，只设置padding-bottom，那该值是无效的)

截止到目前为止，mac上的chrome(版本：51.0.2704.106 (64-bit))对scrollHeight的计算和渲染应该是错误的(不确定是不是错误，欢迎指正),因为chrome计算scrollHeight时，计算了padding-bottom，公式如下：

scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值 + 父元素的padding-bottom值

chrome不仅是这样计算的，也是这样渲染的！！

  

如上图，padding-bottom在mac上的chrome上起了作用，而在其他浏览器上没有作用（padding-right也是如此）

以上是关于height的三个属性的一些说明，width的三个属性同理，就不再多说，这里可以总结一下：

clientHeight = 可视区高度 + padding

offsetHeight = content高度 + padding + border

当内部元素高度超出了外部元素高度时

　　scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值

当内部元素高度小于外部元素高度是

　　scrollHeight = 可视区高度 + padding

既然说完了这三个属性，就顺便说说相关的clientTop，offsetTop，和scrollTop吧

clientTop是指当前可视对象距离上一级元素的距离，因为当前可视对象不包含border，所以通常来说，clientTop就等于border-top值

offsetTop是指当前元素到body元素的距离，因为当前元素包含了border，所以计算时要从margin值开始，依次向外加

scrollTop是指可滚动元素超出当前窗口显示范围的高度，超出多少与当前窗口的border的宽度无关

clientHeight,offsetHeight与scrollHeight的相关知识的更多相关文章

  1. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  2. 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...

  3. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. 详解clientHeight、offsetHeight、scrollHeight

    关于clientHeight.offsetHeight.scrollHeight   window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.av ...

  5. height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

    1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. ...

  6. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  7. 浅谈style.height、clientHeight、offsetHeight、scrollHeight

    先分别介绍以下,以下资料来自MDN HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.clie ...

  8. 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥

    scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...

  9. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

随机推荐

  1. Android_getSystemService (demo_testNet)

    今天主要通过一个案例来看下我们的Android 获取系统服务的问题. 我们通常能够看见登录QQ后如果没有网络的状态的时候,它会告诉你一句话:您进入了没有网络的异次元或者是什么网络连接错误等等.Andr ...

  2. HTML DOM appendChild() 方法

    <!DOCTYPE html> <html> <body> <ul id="myList"> <li>Coffee< ...

  3. POJ 1637 Sightseeing tour (混合图欧拉回路）

    Sightseeing tour   Description The city executive board in Lund wants to construct a sightseeing tou ...

  4. linux /usr/bin/ld: cannot find -lxxx

    在linux环境编译应用程式或lib的source code时出现如下错误:/usr/bin/ld: cannot find -lxxx 这些讯息会随着编译不同类型的source code 而有不同的 ...

  5. [Python] 关于64位机的numpy安装问题

    最近刚换成64位的系统,重新安装了win10,VS也从原来的2010变为了现在的2013. 利用原来32位电脑硬盘里的python2.7安装包安装,然后打算安装numpy. 上来碰到问题:在windo ...

  6. Centos7 安装MPlayer过程详解

    使用自带的totem基本上都无法播放视频,各种格式都不支持,令人无语.想到了MPlayer,为了看片,决定编译安装,过程真的是折腾.如图是自带的Totem播放提示,安装了解码还是无法播放,反正要找其他 ...

  7. Azure IaaS 用户手册 - 第一部分

    可用性集 相当于AZ? 能实现跨Rack的可用性? Azure 如何保证 CPU.内存.硬盘的性能? 传统的 Hyper-V 技术,其CPU 是共享的.比如您的 ThinkPad T430S 是 4C ...

  8. SQLServer 脚本测试

    最近在做大数据同步的工作.很少数据需要特殊清洗算法,每次测试,都测试全部数据,浪费时间,可以只测试那些特殊数据即可(切记).

  9. 前端利器：SASS基础与Compass入门

    SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...

  10. js 获取时间差

    写这片博客 ,下面代码虽然简单,但却很实用...默默留下来... var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;v ...