Javascript 元素宽度/高度的方法

问题：是否存在

getBoundingClientRect

和

窗口的情况。getComputedStyle

的宽度和高度会有所不同

我刚刚在IE中发现了一个不一致的

宽度

（见下），当元素具有

框大小

where

窗口时。getComputedStyle

返回了错误的值

因此，我考虑使用

getBoundingClientRect

中的值覆盖

width

和

height

，但不确定是否存在失败的情况

问题示例（在IE中中断）：

---

是的，这两个功能之间有一些区别

getBoundingClientRect（）

将返回一个包含一组文本矩形的文本矩形对象（元素的

getClientRects（）

返回的矩形的并集，即与元素关联的CSS边框框）。后者，

getComputedStyle（）

，将在应用所有CSS后返回该元素的计算CSS样式

因此，产生的宽度和高度可能会有很大的不同

例如，通过简单地对该元素应用

变换

，您已经更改了

getBoundingClientRect（）

返回的宽度：

此外，即使向元素添加边框或填充，两种情况下的宽度和高度也会不同

---

根据您正在测试的IE版本，您可能会遇到臭名昭著的错误，这会导致对元素维度的解释错误。通过正确添加doctype确保您没有运行页面。

在IE中，CSS

填充：10px会导致溢出，这会增加computedStyle的大小

此外，IE与对象分开计算
边框

这将以
40px

现在使用
溢出：隐藏或
框大小：边框框导致值变为负数，因此将变为200px-40px=160px

注意：在这里，如果我们删除
溢出：隐藏
将不会有任何区别，因为
框大小：边框框
会导致设计不会超出定义的高度和宽度

我已经生成了另一个（没有填充）来

'计算值：180px'

并使用
边框：0px
给出结果
与其他浏览器中的相同

我希望这能澄清IE中的原因（IE有自己的想法，有时会给开发人员带来痛苦）
我很久没有看IE了，但IE in
getComputedStyle
似乎在计算框内的填充和边框，而其他浏览器则在框外计算<代码>200px-（10+10边框）-（10+10填充）=160px
@erosman，感谢您的反馈。是的。你知道我在第一行写的问题的答案吗？对不起，我不知道，但是
getComputedStyle（）
从CSS获取其数据，以便在CSS中对数据进行硬编码
getBoundingClientRect（）
是一个文本矩形对象，它包含一组文本矩形。换句话说，它似乎从对象的渲染中获取数据。区别来自和，正如它在该页面中所说：“IE8和早期版本的IE在width属性中包含了填充和边框。若要解决此问题，请在HTML页面中添加一个。”
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