关于元素的尺寸(dimensions) 说明
更新时间：2011年09月13日 22:42:53 作者：
在使用JavaScript脚本获取元素的尺寸时，有几个属性你需要弄清楚，不然会很棘手。
在以往我都是对这些属性死记硬背，很少真正理解过，忘记了就查手册。看完本文我相信这种情况就不会再发生了。
元素占据的物理空间的尺寸
如果你需要获得元素占据的物理空间，那么使用offsetHeight和offsetWidth。
自然而然此物理空间必然包含的有：padding、滚动条、border。这两个属性与getBoundingClientRect()的height和width属性是一致的。
为了帮助理解请看下图：
元素内容的可视区域的尺寸
可视区域包含padding，但是不包含border、滚动条。此时请使用clientHeight和clientWidth。
为了帮助理解请看下图：
元素全部内容的尺寸
如果你要获取元素内容的真正大小，当然也包含那些不可见的内容，此时你需要使用scrollHeight/scrollWidth。
例如一张600*400的图片被包含在一个300*300的可滚动的容器元素内，那么scrollWidth将返回600，而scrollHeight将返回400
实测：
当元素存在滚动条时，chrome浏览器获取元素的scrollHeight有时候不准确！但是本文的例子是正确的，不知道怎么重现。
获取元素的真实尺寸
大部分场景，我们并不关心元素的全部内容的尺寸（window/document/body元素除外），最常用的恐怕还是获取元素占据的物理空间(offsetHeight/offsetWidth)。
比如对某段文字设置自定义的tooltip，这个时候需要获取目标元素的高度然后对tooltip进行定位。
不论是clientHeight还是offsetHeight它们都包含了padding，假设这段文字包含了100px的padding，这个tooltip的位置显然会极其的不准确。
因此获取元素的高度通常是需要去掉padding。
由于元素的style属性只能获取到内联样式的width/height，所以在IE中需要使用el.currentStyle.height/width，
而标准浏览器中使用window.getComputedStyle(el,null).width/height。
下面是我整理的园友Snandy的一个用户获取元素真实高度和宽度的方法 :
function getStyle(el) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null);
}else{
return el.currentStyle;
}
}
function getWH(el, name) {
var val = name === "width" ? el.offsetWidth : el.offsetHeight,
which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom'];
// display is none
if(val === 0) {
return 0;
}
var style = getStyle(el);
for(var i = 0, a; a = which[i++];) {
val -= parseFloat( style["border" + a + "Width"]) || 0;
val -= parseFloat( style["padding" + a ] ) || 0;
}
return val;
}
使用脚本库往往能帮助我们解决一些棘手的问题，下面来看看jQuery的相关方法
jQuery.height()/jQuery.width()
返回一个整数，为匹配的jQuery对象集合中第一个元素的高度值。
注意此结果不关心盒式模型，不包含元素的padding。此方法等价于getWH(el,'height/width')
这个方法同样能计算出window和document的高度。
jQuery.innerHeight()/jQuery.innerWidth()
对比jQuery.height() /jQuery.width() 此结果包含padding，但是不包含border。
当元素el未设置border时，此方法等价于el.offsetHeight/offsetWidth
jQuery.outerHeight()/jQuery.outerWidth()
对比jQuery.height() /jQuery.width() 此结果包含padding和border，默认不包含margin。
当元素未指定margin时，此方法等价于el.offsetHeight/offsetWidth
可以传入一个bool变量来指定是否包含margin。
注意：
由于获取普通元素的全部内容的尺寸意义不大（某些元素除外如window、document、iframe等），
所以jQuery的这三个方法都未包含不可见区域。
小测试
下面是一个div设置了高度200px，padding为3px，border为1px，里面的图片为958*512
上面的值你都猜对了吗？
更新
又检查了下测试代码，scrollHeight在chrome下不准确的原因是使用了jQuery.ready()，而刚好测试的元素内部包含一张图片。
用过jQuery.ready()的都知道，此时DOM树已经加载完成，但是图片元素还没有完全加载， 因而chrome的处理方式是对的。
于是我就上例又测试了一遍：
在IE 6 / 8返回结果为522/519
chrome返回结果为189
Firefox有一点特殊，不断刷新页面会有两种结果出现：1）522；2）189，但是大部分情况是522
出现这种情况肯定与jQuery 1.6.2的ready函数的实现有关系。
不过就上述结果来看，是否可以推断jQuery.ready()在chrome中是最安全最快的。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
参考资料
元素占据的物理空间的尺寸
如果你需要获得元素占据的物理空间，那么使用offsetHeight和offsetWidth。
自然而然此物理空间必然包含的有：padding、滚动条、border。这两个属性与getBoundingClientRect()的height和width属性是一致的。
为了帮助理解请看下图：
元素内容的可视区域的尺寸
可视区域包含padding，但是不包含border、滚动条。此时请使用clientHeight和clientWidth。
为了帮助理解请看下图：
元素全部内容的尺寸
如果你要获取元素内容的真正大小，当然也包含那些不可见的内容，此时你需要使用scrollHeight/scrollWidth。
例如一张600*400的图片被包含在一个300*300的可滚动的容器元素内，那么scrollWidth将返回600，而scrollHeight将返回400
实测：
当元素存在滚动条时，chrome浏览器获取元素的scrollHeight有时候不准确！但是本文的例子是正确的，不知道怎么重现。
获取元素的真实尺寸
大部分场景，我们并不关心元素的全部内容的尺寸（window/document/body元素除外），最常用的恐怕还是获取元素占据的物理空间(offsetHeight/offsetWidth)。
比如对某段文字设置自定义的tooltip，这个时候需要获取目标元素的高度然后对tooltip进行定位。
不论是clientHeight还是offsetHeight它们都包含了padding，假设这段文字包含了100px的padding，这个tooltip的位置显然会极其的不准确。
因此获取元素的高度通常是需要去掉padding。
由于元素的style属性只能获取到内联样式的width/height，所以在IE中需要使用el.currentStyle.height/width，
而标准浏览器中使用window.getComputedStyle(el,null).width/height。
下面是我整理的园友Snandy的一个用户获取元素真实高度和宽度的方法 :
复制代码 代码如下:
function getStyle(el) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null);
}else{
return el.currentStyle;
}
}
function getWH(el, name) {
var val = name === "width" ? el.offsetWidth : el.offsetHeight,
which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom'];
// display is none
if(val === 0) {
return 0;
}
var style = getStyle(el);
for(var i = 0, a; a = which[i++];) {
val -= parseFloat( style["border" + a + "Width"]) || 0;
val -= parseFloat( style["padding" + a ] ) || 0;
}
return val;
}
使用脚本库往往能帮助我们解决一些棘手的问题，下面来看看jQuery的相关方法
jQuery.height()/jQuery.width()
返回一个整数，为匹配的jQuery对象集合中第一个元素的高度值。
注意此结果不关心盒式模型，不包含元素的padding。此方法等价于getWH(el,'height/width')
这个方法同样能计算出window和document的高度。
jQuery.innerHeight()/jQuery.innerWidth()
对比jQuery.height() /jQuery.width() 此结果包含padding，但是不包含border。
当元素el未设置border时，此方法等价于el.offsetHeight/offsetWidth
jQuery.outerHeight()/jQuery.outerWidth()
对比jQuery.height() /jQuery.width() 此结果包含padding和border，默认不包含margin。
当元素未指定margin时，此方法等价于el.offsetHeight/offsetWidth
可以传入一个bool变量来指定是否包含margin。
注意：
由于获取普通元素的全部内容的尺寸意义不大（某些元素除外如window、document、iframe等），
所以jQuery的这三个方法都未包含不可见区域。
小测试
下面是一个div设置了高度200px，padding为3px，border为1px，里面的图片为958*512
上面的值你都猜对了吗？
更新
又检查了下测试代码，scrollHeight在chrome下不准确的原因是使用了jQuery.ready()，而刚好测试的元素内部包含一张图片。
用过jQuery.ready()的都知道，此时DOM树已经加载完成，但是图片元素还没有完全加载， 因而chrome的处理方式是对的。
于是我就上例又测试了一遍：
在IE 6 / 8返回结果为522/519
chrome返回结果为189
Firefox有一点特殊，不断刷新页面会有两种结果出现：1）522；2）189，但是大部分情况是522
出现这种情况肯定与jQuery 1.6.2的ready函数的实现有关系。
不过就上述结果来看，是否可以推断jQuery.ready()在chrome中是最安全最快的。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
参考资料
各情景下元素宽高的获取 by Snandy
Determining the dimensions of elements
Measuring Element Dimension and Location with CSSOM in Internet Explorer 9
相关文章
在日常开发中,使用uniapp开发项目有时会遇到需要覆盖组件的问题,但由于某些组件的渲染优先级过高,例如video,map ,在小程序中只能使用cover-view去覆盖,这篇文章主要给大家介绍了关于uniapp小程序视图容器cover-view使用的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了JavaScript函数扩展与箭头函数的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
这篇文章主要介绍了微信小程序单选框如何自定义赋值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了谷歌地图打不开的解决办法,本文给出了一个可以正常使用的谷歌地图调用案例,需要的朋友可以参考下2014-08-08
一直在使用js相关的东西，但很少作总结，今天遇到操作js数组的一些问题，对js的数组有了更进一步的认识2015-04-04
这篇文章主要介绍了BootStrap select2 动态改变值的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了javascript弹出层输入框(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了删除ID为sNews的索引为JQID的tr元素里的内容,需要的朋友可以参考下2014-04-04
这篇文章主要给大家介绍了d3.js中强制异步文件读取同步的几种方法，文中给出了详细的介绍和解决方法，对大家具有一定的参考价值，需要的朋友们下面来一起学习学习吧。2017-02-02
原先一直以为要实现跨域请求只能用jsonp，只能支持GET请求，后来了解到使用POST请求也可以实现跨域，但是需要在服务器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers头，下面说明下两个不同的方法实现的方式和原理。2018-05-05
最新评论