javascript - IE8 无法向窗口返回的 JavaScript 对象添加属性

Question

我刚刚在 IE8 中遇到了这个奇怪的问题，我似乎无法找到有关它的更多详细信息。自然地，如果我创建一个 JavaScript 对象，无论我如何创建，我都可以通过动态定义它们来简单地添加属性:

var rect = {};
rect.x = 200;

太棒了。那么在 IE8 中(我不确定其他 IE 是什么)，如果我调用这样的方法:

var span = document.getElementById('my-span');
var rect = span.getBoundingClientRect();
rect.x = Math.round( rect.left );

然后我收到 IE 错误“对象不支持此属性或方法”。这当然不会发生在我提到的第一种情况下，我个人在 javascript 中定义了自己的对象。现在最简单的解决方法是这样做:

var clientRect = span.getBoundingClientRect();
var rect = { top: clientRect.top, left: clientRect.left, right: clientRect.right, bottom: clientRect.bottom };
rect.x = Math.round( rect.left );

没问题。但我想知道的是，为什么 IE8 不让我向 getBoundingClientRect() 方法返回的这个对象动态添加字段/属性/属性(我不确定正确的 JS 术语)？是否有另一种(正确的)方法来添加属性？ window 对象的方法返回的所有对象都会发生这种情况吗？这有记录吗？或者这是一个错误？ (在这种情况下，我会采取解决方法并继续前进)。

Answer 1

您的问题在于 getBoundingClientRect() 的结果是只读的。因此，您不能向其添加属性。但是，您可以将它们读入您自己的对象(就像您的解决方法一样)。有一种更简洁的方法:

var span = document.getElementById("span");
var rect = span.getBoundingClientRect();
var myRect = {};
for(var key in rect) {
    myRect[key] = rect[key];
}

这导致 myRect 具有 getBoundingClientRect() 结果的所有属性，但它们现在是可读写的，您可以向它们添加 myRect.x。

编辑:FF 和 Chrome <= 37 似乎默认返回 getBoundingClientRect() 读写