2

我刚刚在 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吗？这有记录吗？或者它是一个错误？（在这种情况下，我将采取解决方法并继续前进）。

4

2 回答 2

3

您的问题在于结果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()默认返回读写

于 2014-10-09T16:18:03.713 回答
0

需要明确的是，正如@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) }
    }
于 2014-10-09T18:21:03.787 回答