登 录
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>取HTML元素坐标的函数</title><br /> <meta name="generator" content="editplus" /><br /> <meta name="author" content="" /><br /> <meta name="keywords" content="" /><br /> <meta name="description" content="" /><br /> </head><br /> <body><br /> <table><br /> <tr><br /> <td>aa</td><br /> <td>bb</td><br /> <td>cc</td><br /> <td>dd</td><br /> <td id="td">ee</td><br /> </tr><br /> <tr><br /> <td>ff</td><br /> <td>gg</td><br /> <td>hh</td><br /> <td>ii</td><br /> <td>jj</td><br /> </tr><br /> </table><br /> <script type="text/javascript"><br /> <!--<br /> function GetElCoordinate(e) //获取Element的坐标<br /> {<br /> var t = e.offsetTop;<br /> var l = e.offsetLeft;<br /> var w = e.offsetWidth;<br /> var h = e.offsetHeight;<br /> while (e = e.offsetParent)<br /> {<br /> t += e.offsetTop;<br /> l += e.offsetLeft;<br /> }<br /> return {<br /> top: t,<br /> left: l,<br /> width: w,<br /> height: h,<br /> bottom: t + h,<br /> right: l + w<br /> }<br /> }<br /> function GetAbsPoint(e)<br /> {<br /> var oRect = e.getBoundingClientRect();<br /> return {<br /> top: oRect.top,<br /> left: oRect.left,<br /> width: e.offsetWidth,<br /> height: e.offsetHeight,<br /> bottom: oRect.bottom,<br /> right: oRect.right<br /> }<br /> }<br /> var o = GetElCoordinate(document.getElementById("td"));<br /> var p = GetAbsPoint(document.getElementById("td"));<br /> alert("top: " + o.top + ", left: " + o.left + ", width: " + o.width + ", height: " + o.height + ", bottom: " + o.bottom + ", right: " + o.right + "\n" + "top: " + p.top + ", left: " + p.left + ", width: " + p.width + ", height: " + p.height + ", bottom: " + p.bottom + ", right: " + p.right);<br /> //--><br /> </script><br /> </body><br /> </html><br /> [Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
抱歉!评论已关闭.
