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

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" οnclick="alert(document.getElementById('eyejs').clientHeight)" value="点击clientHeight" />
<input type="button" οnclick="alert(document.getElementById('eyejs').style.height)" value="点击style.height" />
<input type="button" οnclick="alert(document.getElementById('eyejs').offsetHeight)" value="点击offsetHeight" />
<input type="button" οnclick="alert(document.getElementById('eyejs').scrollHeight)" value="点击scrollHeight" />

clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系相关推荐

【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别
clientHeight.offsetHeight和scrollHeight的区别 clientHeight = content + padding, 不加溢出内容的高度 ,返回整数 offsetHe ...
offsetHeight, clientHeight与scrollHeight的区别
[size=xx-large][color=indigo]offsetHeight, clientHeight与scrollHeight的区别[/color][/size] [size=large][ ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
offsetWidth、offsetHeight、clientHeight、clientWidth、scrollHeight、scrollWidth详细对比
offsetWidth.offsetHeight.clientHeight.clientWidth.scrollHeight.scrollWidth详细对比代码测试 box-sizing:conte ...
html5 canvas 自动改变宽高,H5 canvas中width、height和style的宽高区别详解
前言最近在学习canvas属性中遇到一个小问题,就是canvas的width和height,通过查找相关的资料终于解决,所以下面将解决的过程分享出来给大家,下面话不多说了,来一起看看详细的介绍吧 C ...
Android中style和theme的区别
在学习Xamarin android的过程中,最先开始学习的还是熟练掌握android的六大布局-LinearLayout .RelativeLayout.TableLayout.FrameLayou ...
vuejs里:style和:class的区别（vue动态操作绑定class 和 style的方法）
Class 与 Style 绑定 - Vue.js :class的意思是动态绑定class的名称,然后我们在<style>里面去专门设置class的效果即可用法: :style=&quo ...
关于height:100%和height:100vh的区别
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置height ...
document.getelementbyid css,使用document.getElementById（）从css获取值。style.height javascript...
我试图通过 var high = document.getElementById("hintdiv").style.height; alert(high); 摆脱一个div框高度值 ...

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

clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系相关推荐

最新文章

热门文章