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错误＆＃34;对象不支持此属性或方法。＆＃34;这当然不会发生在我提到的第一个案例中，我个人在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＆lt; = 37似乎默认返回getBoundingClientRect()读写

Answer 2

为了清楚起见，正如@Teemu所指出的那样，仅是IE8及其早期的问题。

Object.getOwnPropertyDescriptor(window,'rect')
// Object { configurable=false, enumerable=true, writable=true, ...}

作为解决方法，为什么不将它包装在一个对象中......

    var rect = {
        clntRect: span.getBoundingClientRect(),
        x: function () { return Math.round(this.clntRect.left) },
        y: function () { return Math.round(this.clntRect.top) }
    }

...或

    var rect = {
        span: span,
        clntRect: function () { return this.span.getBoundingClientRect() },
        x: function () { return Math.round(this.clntRect().left) },
        y: function () { return Math.round(this.clntRect().top) }
    }

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

2 个答案: