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 );

それは問題ありません。getBoundingClientRect()しかし、私が疑問に思っているのは、メソッドによって返されたこのオブジェクトに IE8 でフィールド/プロパティ/属性 (正しい 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 <= 37getBoundingClientRect()は、デフォルトで読み書きを返すように見えます

于 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 に答える