2

インスペクターの JS コンソールで、Safari や Chrome などからこれを試してください。

var x = document.body.getBoundingClientRect();
> undefined

x.top;
> 0

x.top += 5;
> 5

x.top;
> 0

getBoundingClientRect()によって生成されたオブジェクトは、変更可能なオブジェクトであると予想していました。私はこれが誤りであることを示しました。ブラウザの状態との同期も維持されないため、ページを少しスクロールして の値を確認すると、下にスクロールしたため負の値になっているはずですがx.top、それでも報告されます。0少なくとも、別の呼び出しで x を再割り当てするとgetBoundingClientRect()、負の値が報告されます。

そのため、それを変更しようとしても反応しませんが、その動作を示すことには、より高い目的があるようには見えません。

たぶん、これを説明するためのある種のきれいな方法がありますか？*肩をすくめる*よりも良いことです。

4

2 に答える 2

4

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRectによると、

rectObject = object.getBoundingClientRect();

返される値は、要素のgetClientRects()によって返される長方形の和集合であるTextRectangleオブジェクトです。つまり、要素に関連付けられた CSS ボーダーボックスです。

https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRectによると、

返される TextRectangle の属性は読み取り専用です。

さらに、仕様（http://www.w3.org/TR/cssom-view/#the-clientrect-interface）は言う

interface ClientRect {
   readonly attribute float top;
   readonly attribute float right;
   readonly attribute float bottom;
   readonly attribute float left;
   readonly attribute float width;
   readonly attribute float height;
};
于 2013-10-16T00:23:50.967 に答える
4

このgetBoundingClientRectメソッドは、プロパティが読み取り専用に指定されているClientRectオブジェクトを返します。これがまさにその仕組みです:-) ほとんどのブラウザはこれをwritable: false 記述子付きのプロパティとして実装します（ただし、これを信頼しないでください。ホストオブジェクトは任意に実装される可能性があります）。

この動作の上位の目的は、メソッドが現在の値の静的なスナップショットを返すことです。このスナップショットは、ライブDOM とそれに加えられた変更から切り離されます。したがって、返されたオブジェクトは固定されており、それに割り当てても意味がありません。ビューを変更する方法は他にもあります。

于 2013-10-16T00:25:18.333 に答える