要素の絶対位置の取得

クロスブラウザ対策

参考ＵＲＬ
anything from here offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について

利用時には、元のソースからfunctionを変数に入れ変えて利用しました。

//必要となるGlobal変数の定義
// 間違いのないように全文字列を小文字に変換
var agt = navigator.userAgent.toLowerCase();
var is_ie　 = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);

　//要素のスタイル属性を取得する関数
var getElementStyle = function (targetElm,IEStyleProp,CSSStyleProp) {
　var elem = targetElm;
　if (elem.currentStyle) {
　　return elem.currentStyle[IEStyleProp];
　} else if (window.getComputedStyle) {
　　var compStyle = window.getComputedStyle(elem,"");
　　return compStyle.getPropertyValue(CSSStyleProp);
　}
}//---End Function

var getPosition = function (that) {
　var targetEle = that;　　　//thatは位置を取得したい要素Object
　var pos = new function(){ this.x = 0; this.y = 0; }
　while( targetEle ){
　　pos.x += targetEle.offsetLeft;
　　pos.y += targetEle.offsetTop;
　　targetEle = targetEle.offsetParent;
　　　//IEの補正：上記計算で無視されてしまう各親要素のborder幅を加算
　　if ((targetEle) && (is_ie)) {
　　　pos.x += (parseInt(getElementStyle(targetEle,"borderLeftWidth","border-left-width")) || 0);
　　　pos.y += (parseInt(getElementStyle(targetEle,"borderTopWidth","border-top-width")) || 0);
　　}
　}
　　//geckoの補正：カウントしないbody部border幅をマイナスしてしまうので２倍して加算
　if (is_gecko) {
　　　//以下の部分でbody部を取得し、borderの減算を補正する。
　　var bd = document.getElementsByTagName("BODY")[0];　　//body部を取得
　　pos.x += 2*(parseInt(getElementStyle(bd,"borderLeftWidth","border-left-width")) || 0);
　　pos.y += 2*(parseInt(getElementStyle(bd,"borderTopWidth","border-top-width")) || 0);
　}
　return pos;
}//---End Function

Amazonウィッシュリング（リンク起動）で利用