取得目前的物件XY座標(取得取物件定位) @ 薊

寫js時, 三不五時會用到的

就是要找物件的xy座標來做定位

這時, 就要借用offset屬性了

例如: 左側頭像的座標可以這樣

var obj = document.getElementById('headshot-img'); var x = obj.offsetLeft; var y = obj.offsetTop; alert('x:'+x+', y:'+y);

jQuery的寫法是

var position = $('#headshot-img').offset(); var x = position.left; var y = position.top; alert('x:'+x+', y:'+y);

另外offsetTop, style.top的區別

offset系列參數, 是唯讀的屬性, 取得的是數值, 在html被載入完成後就可以取得

style.XX系列參數, 可以設定值給它, 它是字串格式(像這樣 style.top='480px';), 而且, 沒有被設定的話, 它會是空值.

還有另外的取物件定位的方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-TW"> <head> <title></title> <script type="text/javascript"> function realPosX (oTarget) { try { var realX = oTarget.offsetLeft; if (oTarget.offsetParent.tagName != "BODY") { realX += realPosX(oTarget.offsetParent); } return realX; } catch (e) { alert("realPosX: "+e); } } function realPosY (oTarget) { try { var realY = oTarget.offsetTop; if (oTarget.offsetParent.tagName != "BODY") { realY += realPosY(oTarget.offsetParent); } return realY; } catch (e) { alert("realPosY: "+e); } } </script> </head> <body> <img src="images.jpg" mce_src="images.jpg" width="300" height="300" border="0" id="img01"> <img src="images.jpg" mce_src="images.jpg" width="300" height="300" border="0" id="img02"> <script type="text/javascript"> var opt = document.getElementById('img01'); document.write("<br />\n"); document.write( 'img01, x:' + realPosX(opt) + ', y:' + realPosY(opt)); var opt2 = document.getElementById('img02'); document.write("<br />\n"); document.write( 'img02, x:' + realPosX(opt2) + ', y:' + realPosY(opt2)); </script> </body> </html>

其它相關的內容: 滑鼠座標

jQuery: Tutorials:Mouse Position