12

イメージ コントロールがあり、イメージ コントロールの上にいくつかの要素を配置する必要があります。getBoundingClientRect() を使用すると、IE(7、8、および 9) で動作しますが、Firefox と Chrome では異なる値が返されます。要素の境界矩形を取得するために利用できる他の関数はありますか?

4

3 に答える 3

12

古い IE ドキュメントからの引用getBoundingClientRect: 「Microsoft® Internet Explorer 5 では、ウィンドウの左上は真のクライアントに対して 2.2 (ピクセル) です。」これは今でも有効なようです。

IE9 の使用法では<meta http-equiv="x-ua-compatible" content="ie=edge"/>、左上隅をその右側の位置 (0,0) に「設定」します。

d4rkpr1nc3 が回答したように、他の方法でこれらの値を取得できますが、結果は使用するブラウザーにも依存します。この問題には、少し異なるアプローチが必要になると思います。以下のコードを確認してください。いくつかのアイデアが得られるかもしれません。

<DIV id="imagecontrol" style="position:absolute;width:200px;height:200px;">
  <DIV id="topleft" style="position:absolute;width:100px;height:100px;left:0px;top:0px;"></DIV>
  <DIV id="topright" style="position:absolute;width:100px;height:100px;right:0px;top:0px;"></DIV>
  <DIV id="bottomleft" style="position:absolute;width:100px;height:100px;left:0px;bottom:0px;"></DIV>
  <DIV id="bottomright" style="position:absolute;width:100px;height:100px;right:0px;bottom:0px;"></DIV>
</DIV>
于 2012-04-19T15:14:23.943 に答える
5

ブラウザーによって値が多少異なる場合がgetBoundingClientRect()ありますが、パフォーマンスと精度を確保するための最善の策です。ただし、返される座標はドキュメントではなくビューポートに相対的であるため、ウィンドウ/ドキュメントのスクロール値を使用してそれを考慮する必要があります。

これについての良いブログ投稿は次のとおりです。

http://weblogs.asp.net/bleroy/archive/2008/01/29/getting-absolute-coordinates-from-a-dom-element.aspx

デビッド・マークはこの点で優れています。comp.lang.javascriptからの彼のヒントは次のとおりです。

https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ

于 2012-04-19T15:07:17.413 に答える
3

次のように、オフセットを使用してそれを行うことができます。 

var top = element.offsetTop;
var left = element.offsetLeft;
var width = element.offsetWidth;
var height = element.offsetHeight;
var bottom = top + height;
var right = left + width;
于 2012-04-19T15:06:02.943 に答える