在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. Python—元组tuple

    列表的知识其实就类似于c语言中的数组,可插入.修改.list=[a,b,c,d] 而元组tuple,一旦初始化即不可修改.好处与绝对安全. 定义一个空的元组:t=() 定义只有一个元素的元组:t=(1 ...

  2. 网络请求框架----HttpClient的get,post和图片上传服务器

    HttpClient是Apache Jakarta Common下的子项目,用来提供高效的.最新的.功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTTP协议最新的版本和建议.HttpCli ...

  3. 利用Maven建立java web项目

    方法一:在IntelliJ IDEA中创建maven web项目 一.在新建项目对话框中,选择“Maven”类型,设置好jdk,勾选“create from archetype”,在列表中选择“mav ...

  4. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  5. Java中XML格式的字符串4读取方式的简单比较

    Java中XML格式的字符串4读取方式的简单比较 1.java自带的DOM解析. import java.io.StringReader; import javax.xml.parsers.Docum ...

  6. 2016中国大学生程序设计竞赛（长春）-重现赛 1010Ugly Problem 回文数 模拟

    Ugly Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  7. Daily Scrum 12.11

    今日完成任务: 解决了类型同时存在于两个自动生成的DLL中导致编译不通过的问题:修复了主页标签显示的BUG:修复异常,网站可以在服务器端正常运行. 明日任务: 黎柱金 解决上传文档时建立文档和标签联系 ...

  8. 获取wifi信息

    最近有个项目需要获取手机附近wifi列表,查了许多资料发现,现在只能查到wifi的SSID,并且用到的是私有api,无法通过app store审核,这里记录一下,方便学习,新手勿喷,欢迎大神指教(wi ...

  9. Qt 无法解析外部文件2001,2019之类的

    一般是部分代码出错,比如构造函数的实参没有对应或者设置好: 还有尝试删除debug生成的文件试试,清理当前项目->重新构建: 以及看下有没有变量没有初始化或者变量定义的时候父类错了等. 以及其他 ...

  10. css3 transform的基本用法和介绍

    <style>/* 最简单的一个transition动画 .box{width:100px;height:100px;border:1px solid;background:green;- ...