javascriptを使ってhtml要素のx、yの位置を取得する方法

私は自分のHTML文書にいくつかのCSSクラスを持つdiv要素を持っていて、その要素のx、y位置を取得したいと考えています。javascriptを使ってhtml要素のx、yの位置を取得する方法

2012-06-01 Nudier Mena

x、yの位置をどのように取得するのですか？ドキュメント/ウィンドウ？またはその親ですか？ – Ian

文書内のx、yの位置を取得します。 –

使用getBoundingClientRect：たとえば http://ejohn.org/blog/getboundingclientrect-is-awesome/

：

var div = document.getElementById("yourDiv"); 
var rect = div.getBoundingClientRect(); 
alert("Coordinates: " + rect.left + "px, " + rect.top + "px");

がgetBoundingClientRectがあることを意味し、現在のビューポート、相対座標を与えることを忘れないでください、あなたは相対座標を知りたい場合document.bodyの場合は、水平スクロール量と垂直スクロール量を追加する必要があります（document.documentElement.scrollLeftまたはdocument.body.scrollLeft、Firefoxの場合はもちろん210）。私は理解していれば

出典

2012-06-01 16:00:26 MaxArt

、あなたは、どのようにあなたが右、上、高さのアクセスもを持ってそれをHTML要素

# first tag link of this page 
document.getElementsByClassName('post-taglist')[0].children[0].getClientRects()[0] 
# question div 
document.getElementById('question').getClientRects()[0]

のてClientRectを取得するために、このhttp://www.quirksmode.org/js/findpos.html

出典

2012-06-01 16:08:13 Jakub

ああ、はい。古いクライアントをサポートしたい場合は読んでください。しかし、そのページを更新する必要があります。 – MaxArt

本当に？あなたはそこに何が欠けているか説明できますか？ – Jakub

私が私の答えで指摘したように、 'getBoundingClientRect'は素晴らしいツールであり、すべての主要なブラウザでサポートされています。それは事実を単純化します。古いquirksmode.orgコードはもう動作しません...ただ遅いです。 – MaxArt

例怒鳴るショーをやりたいです幅、左および下の属性。

出典

2012-06-01 16:11:15

'getClientRects'は過剰ですので、すべてを知る必要はありません。すべての矩形を取得する主な理由は、テキストの行の位置とサイズを知りたい場合です。 – MaxArt

NM。 MaxArtが他のところで書いたものを逃した。 –

javascriptを使ってhtml要素のx、yの位置を取得する方法

答えて

関連する問題