style.height 包括 元素的滚动条,不包括边框
clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight
offsetHeight 包括元素的滚动条和边框,只有在没有元素的滚动条和边框的情况下,offsetHeight==style.height==clientHeight
scrollHeight offsetHeight+scrollTop,只有在没有元素的滚动条和边框和滚动时的情况下,offsetHeight==style.height==clientHeight==,offsetHeight==style.height==scrollHeight
 公式是:
 style.height=clientHeight+滚动条宽度;
 offsetHeight=style.height+borderTop+borderBottom;
 scrollHeight=offsetHeight+scrollTop;

同理: clientWidth,offsetWidthstyle.width,scrollWidth
演示时营造不同的环境测试(改变eyejs元素的样式)
<div id="eyejs" style="border: solid 10px red;width:100px;height:100px;overflow:scroll;">
<div style="height:200px;"></div>
</div>
<input type="button" onclick="alert(document.getElementById('eyejs').clientHeight)" value="点击clientHeight" />
<input type="button" onclick="alert(document.getElementById('eyejs').style.height)" value="点击style.height" />
<input type="button" onclick="alert(document.getElementById('eyejs').offsetHeight)" value="点击offsetHeight" />
<input type="button" onclick="alert(document.getElementById('eyejs').scrollHeight)" value="点击scrollHeight" />

clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系的更多相关文章

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

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

  2. style.height、offsetHeight、clientHeight、scrollHeight的差别

    style.height 包含元素的滚动栏,不包含边框 clientHeight 不包含元素的滚动栏和边框 offsetHeight 包含元素的滚动栏和边框 scrollHeight offsetHe ...

  3. offsetHeight, clientHeight与scrollHeight的区别

      在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...

  4. obj.offsetHeight与obj.style.height区别

    我们都知道obj.offsetHeight与obj.style.height都可以获取obj的高度,但是在js使用中,我们通常会使用前者来获取高度,这是为什么,二者有什么样的区别呢. 1.obj.of ...

  5. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

  6. innerHeight,clientHeight,offsetHeight,scrollWidth等的区别和用法

    要理解这几个属性,首先要搞明白body,documentElement的区别 1.body是DOM对象里的body子节点,即<body>标签2.documentElement是整个节点树的 ...

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

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

  8. obj.offsetHeight与obj.style.height $(obj).height()与$(obj).css('height')

    相同:都可以获取obj的高度区别:(1)obj.offsetHeight可以获取外部.内嵌和内联中定义的高,而obj.style.height只能获取内联中定义的高:(2)obj.offsetHeig ...

  9. clientHeight & offsetHeight & scrollHeight

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

随机推荐

  1. nodejs图片总结

    今天终于把朴灵老师写的<深入浅出Node.js>给学习完了, 这本书不是一本简单的Node入门书籍,它没有停留在Node介绍或者框架.库的使用层面上,而是从不同的视角来揭示Node自己内在 ...

  2. c++刷题(39/100)笔试题3

    题目1: 现在你需要用一台奇怪的打字机书写一封书信.信的每行只能容纳宽度为100的字符,也就是说如果写下某个字符会导致行宽超过100,那么就要另起一行书写 信的内容由a-z的26个小写字母构成,而每个 ...

  3. 洛谷 P4128: bzoj 1815: [SHOI2006]有色图

    题目传送门:洛谷 P4128. 计数好题,原来是 13 年前就出现了经典套路啊.这题在当年应该很难吧. 题意简述: \(n\) 个点的完全图,点没有颜色,边有 \(m\) 种颜色,问本质不同的图的数量 ...

  4. 【CTF WEB】反序列化

    反序列化 漏洞代码 <?php error_reporting(0); if(empty($_GET['code'])) die(show_source(__FILE__)); class ex ...

  5. Linux内核启动流程分析(一)【转】

    转自:http://blog.chinaunix.net/uid-25909619-id-3380535.html 很久以前分析的,一直在电脑的一个角落,今天发现贴出来和大家分享下.由于是word直接 ...

  6. ubuntu 12.04网络配置之设置静态iP

    step: 1.输入命令: sudo vi /etc/network/interfaces 看到如下内容: 2.追加以下内容: iface eth0 inet static address 192.1 ...

  7. 【前端node开发】你需要的Express开发教程

    1.极简Node教程-七天从小白变大神(一:你需要Express) https://www.jianshu.com/p/b4701a6efc50

  8. 0行代码实现任意形状图片展示--android-anyshape

    前言 在Android开发中, 我们经常会遇到一些场景, 需要以一些特殊的形状显示图片, 比如圆角矩形.圆形等等.关于如何绘制这类形状, 网上已经有很多的方案,比如自定义控件重写onDraw方法, 通 ...

  9. NFS基础配置

    需要安装的包: rpc-bind nfs-utils 修改配置文件 /etc/exports 配置 /tmp *(ro) 修改配置之后记得重启服务 sudo systemctl restart nfs ...

  10. .NetCore 中使用AppMetrics向InfluxDB中添加监控数据并通过Grafana图像分析

    考虑到分布式部署监控环境是所有的请求情况,所以这一块一般在网关GateWay里面加比较省事,聚合在一起的,如果放在api服务中,如果只有1个还好,一旦部署Node多是很痛苦的事情 这天需要添加的Nug ...