有時候,我們使用Javascript輔助CSS設計網站版面配置的時候,希望動態的抓取某個DOM元件之絕對作標(以父原素左上角為原點),這時候我們可以使用以下幾個方法來達到目的。
純Javascript
var getAbsPos = function(o) { var pos = {x:0, y:0}; while (o!=null) { pos.x += o.offsetLeft; pos.y += o.offsetTop; o = o.offsetParent; //若區塊外還有父元素,就繼續往外推 } return pos; } var POS = getAbsPos(element); console.log("top: "+POS.y, "left: "+ POS.x);
使用jQuery
var POS = $(element).offset(); console.log("top: "+POS.top , "left: "+POS.left);
使用純Javascript,但卻希望像jQuery般操作
Element.prototype.offset = function(){ var pos = {top:0,left:0}; pos.left = pos.left + this.offsetLeft; pos.top =pos.top + this.offsetTop;return pos; } var POS = (element).offset(); console.log("top: "+POS.top , "left: "+POS.left);
Note:
element 為特定的DOM node.例如: document.getElementById("my_id").
javascript 數學編程
回覆刪除http://freeman2.com/jsindex1.htm
下面是英文程式目錄
http://freeman2.com/jsindex2.htm
球面大圓作圖器,英文
http://freeman2.com/gcircle2.htm
複數計算器,英文
http://freeman2.com/complex4.htm
複變函數之導證 中文
http://freeman2.com/tutc0006.htm
畫出 x,y 數據
http://freeman2.com/drawdata.htm
論語里仁四之十九
子曰:「父母在,不遠遊,遊必有方。」
論語衛靈公第十五之二十三
子貢問曰:「有一言而可以終身行之者乎?」
子曰:「其恕乎!己所不欲,勿施於人。」
《論語》全書:
http://freeman2.com/analects.htm
fourriver at earthlink dot net
103,01,02,17,16 劉鑫漢
中文數學曲線圖
http://freeman2.com/gcircle1.gif
http://freeman2.com/complex1.gif
http://freeman2.com/complex5.gif