元素尺寸说明

以前我都是死记硬背这些属性，很少真正理解。如果我忘记了，我会检查手册。看完这篇文章，相信这种情况不会再发生了。元素占用的物理空间大小如果需要获取元素占用的物理空间，请使用offsetHeight和offsetWidth。自然，这个物理空间必须包括填充、滚动条和边框。这两个属性与getBoundingClientRect()的高度和宽度属性一致。为了帮助理解，请看下图：。

内容可视区域的尺寸可视区域包含填充，但不包含边框或滚动条。此时使用clientHeight和clientWidth。为了帮助理解，请看下图：。

所有元素的大小如果你想得到元素的真实大小，当然也包括那些不可见的内容，所以你需要使用scrollHeight/scrollWidth。例如，如果一张600*400的图片包含在一个300*300的可滚动容器元素中，那么scrollWidth将返回600，而scrollHeight将返回400。当元素中存在滚动条时，chrome浏览器得到的元素的scrollHeight有时是不准确的！但是文中的例子是正确的，不知道怎么重现。获取元素的真实尺寸。在大多数场景中，我们并不关心所有元素的维度(除了窗口/文档/正文元素)，但最常见的是得到元素所占用的物理空间(offset heat/offset with)。例如，如果为一段文本设置自定义工具提示，则需要获取目标元素的高度，然后找到工具提示。clientHeight和offsetHeight都包含填充。假设这个文本包含100px的填充，这个工具提示的位置显然会非常不准确。因此，获取元素的高度通常需要移除填充。由于一个元素的样式属性只能得到内嵌样式的宽度/高度，所以在IE中使用el.currentStyle.height/width是必要的，而window。getcomputedstyle (el，null)。宽度/高度在标准浏览器中使用。以下是公园好友Snandy用户获取元素真实高度和宽度的方法。复制代码如下：函数get style(El){ if(window . getcomputed style){ return window . getcomputed style(El，null)；} else { return el.currentStyle} }函数getWH(el，name) { var val=name==='width '？El . offset with : El . offset theight，哪个=name===' width '？['左'，'右'] : ['上'，'下']；//如果(val===0) { return 0，则显示无；} var style=GetStyle(El)；对于(var i=0，a；a=哪个[I]；){ val -=parseFloat(样式[' border ' a ' Width '])| | 0；val -=parseFloat(样式[' padding ' a])| 0；}返回val}使用脚本库往往可以帮助我们解决一些棘手的问题。让我们来看看jQuery的相关方法，jQuery.height()/jQuery.width()，它返回一个整数，这是匹配的jQuery对象集中第一个元素的高度值。注意，这个结果不关心盒子模型，也不包括元素的填充。这个方法相当于getWH(el，‘height/width’)，也可以计算窗口和文档的高度。将jquery . inner height()/jquery . inner width()与jQuery.height() /jQuery.width()进行比较。此结果包含填充，但不包含边框。当没有为元素el设置边框时，该方法相当于将el.offsetHeight/offsetWidth jquery . outheight()/jquery . outwidth()与jQuery.height() /jQuery.width()进行比较。结果包含填充和边框，但默认情况下不包含边距。当元素没有指定边距时，此方法相当于el.offsetHeight/offsetWidth.您可以传入一个bool变量来指定是否包含边距。注意：因为获取常用元素(除了窗口、文档、iframe等一些元素)所有内容的大小意义不大。)，jQuery的这三种方法不包含不可见区域。小测试下面是一个div，高度200px，填充3px，边框1px，图片958*512。以上数值你猜对了吗？更新并检查了下一个测试代码。chrome中scrollHeight不准确的原因是使用了jQuery.ready()，而刚刚测试的元素里面包含了一张图片。任何使用过jQuery.ready()的人都知道DOM树已经加载，但是图片元素还没有完全加载，所以chrome的处理方法是正确的。于是我又测试了一下上面的例子：在IE 6/8中，结果是522/519，而在Chrome中，结果是189火狐有点特别，页面不断刷新会有两个结果：1)522；2)189，但大部分情况是522，这肯定和jQuery 1.6.2的ready函数的实现有关。但是，从上面的结果，我们能推断出jQuery.ready()是chrome中最安全最快的吗？

客户端高度偏移右滚动高度jquery。高度()。jquery。内部高度()。jquery。外部高度()[Ctrl+A全选注：如需引入外部射流研究…需刷新才能执行]参考资料各情景下元素宽高的获取通过在Internet Explorer 9中使用构建确定元素的维度使用元素维度和位置