元素宽度/高度的方法

Question

元素宽度/高度的方法

javascriptcss

8

问题: 是否有这样的情况，getBoundingClientRect和window.getComputedStyle在width或height方面会有差异？

我在IE中发现了一个不一致的宽度（见下文），当一个元素有box-sizing时，window.getComputedStyle返回错误的值。

所以我想覆盖只有width和height从getBoundingClientRect的值，但不确定是否有失败的情况。

问题示例（在IE中无法正常显示）：http://jsfiddle.net/bwPM8/

var box = document.querySelector('.box');
var gBCR_width = box.getBoundingClientRect().width; // always 200
var wGCS = window.getComputedStyle(box).width; // 200 some browsers, 160 in IE

- Rikard

我已经很久没有关注IE了，但是在getComputedStyle中的IE似乎会将padding和border计算在盒子内部，而其他浏览器则会将其计算在外部。 200px -（10 + 10边框）-（10 + 10填充）= 160px - erosman

@erosman，感谢您的反馈。是的，IE以自己的方式进行计算。您知道我在第一行写的问题的答案吗？ - Rikard

抱歉，我不是很确定，但是 getComputedStyle() 从 CSS 中获取数据，因此数据在 CSS 中是硬编码的。getBoundingClientRect() 是一个文本矩形对象，它包含一组文本矩形。换句话说，它似乎是从对象的渲染中获取数据的。这种差异来自于 CSS 盒子模型，正如该页面所述：“IE8 及更早版本的 IE 在 width 属性中包括填充和边框。要解决此问题，请将 <!DOCTYPE html> 添加到 HTML 页面中。” - erosman

2个回答

5

在IE浏览器中，CSS属性padding: 10px;会导致溢出，这样就会在计算样式时给你额外的大小。此外，IE单独计算border与对象的差异为40px。现在，使用overflow:hidden;或box-sizing: border-box;会导致值变为负数，因此将变为200px - 40px = 160px。注意：如果我们删除overflow:hidden，没有任何区别，因为box-sizing:border-box使设计不会超过定义的高度和宽度。我生成了另一个fiddle1（没有填充），结果为'computedValue : 180px'。使用Border:0px，fiddle2 的结果与其他浏览器相同。希望这能解释IE内部是如何运作的（有时会令开发者头痛）。

- MarmiK

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MMM · Accepted Answer

是的，这两个函数之间有几个不同点。 getBoundingClientRect()将返回一个文本矩形对象，该对象包围一组文本矩形（由元素返回的getClientRects()的矩形的联合体，即与元素关联的CSS边框框）。后者getComputedStyle()将返回该元素的计算CSS样式，在应用所有CSS后。

因此，结果的宽度和高度可能会大不相同。

例如，仅通过对该元素应用transform，您已经改变了getBoundingClientRect()返回的宽度： http://jsfiddle.net/epW3c/ 此外，即使您向元素添加边框或填充，两种情况下的宽度和高度也会有所不同。

根据您测试的IE版本，您可能会遇到臭名昭著的Internet Explorer盒子模型错误，导致元素尺寸的解释错误。确保通过正确添加doctype来确保您没有在怪异模式下运行页面。