<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p onclick=getElementRect(this)>你好</p> <p onclick=getElementRect(this)>你好</p> <p onclick=getElementRect(this)>你好</p> <table border="1" cellspacing="" cellpadding=""> <tr><th onclick=getElementRect(this)>Header</th></tr> <tr><td>Data</td></tr> <tr><td>Data</td></tr> </table> </body> </html> <script> /** * 滾動條的位置 * @param {Object} w */ function getScrollOffsets(w){ w = w || window; //除了IE 8以及更早的版本以外，其他瀏覽器都支持 if(w.pageXOffset != null){ return {x:w.pageXOffset,y:w.pageYOffset}; } /** * document.compatMode用來判斷當前瀏覽器采用的渲染方式。 * BackCompat：標准兼容模式關閉。 * CSS1Compat：標准兼容模式開啟。 * 當document.compatMode等於BackCompat時，瀏覽器客戶區寬度是document.body.clientWidth;滾動條的位置document.body.scrollLeft * 當document.compatMode等於CSS1Compat時，瀏覽器客戶區寬度是document.documentElement.clientWidth;滾動條的位置 document.documentElement.scrollLeft */ var d = w.document; if(document.compatMode == "CSS1Compat"){ return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop}; }else{ return {x:d.body.scrollLeft,y:d.body.scrollTop}; } } //作為一個對象的w和h屬性返回視口的尺寸 function getViewportSize(w){ //使用指定的窗口， 如果不帶參數則使用當前窗口 w = w || window; //除了IE8及更早的版本以外，其他瀏覽器都能用 if(w.innerWidth != null){ return {w: w.innerWidth, h: w.innerHeight}; } //對標准模式下的IE（或任意瀏覽器） var d = w.document; if(document.compatMode == "CSS1Compat"){ return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}; }else{ return {w: d.body.clientWidth, h: d.body.clientHeight}; } } /** * 這個方法返回元素在視口坐標中的位置。為了轉換為甚至用戶滾動瀏覽器窗口以后任然有效的文檔坐標，需要加上滾動偏移量： * getBoundingClientRect()方法。該方法是在IE5中引入的，而現在當前的所有瀏覽器都實現了。它不需要參數，返回left、right、top、bottom屬性的對象。 * @param {Object} e */ function getElementRect(e){ var box = e.getBoundingClientRect(); var offsets = getScrollOffsets(); var x = box.left + offsets.x; var y = box.top + offsets.y; var w = box.width || box.right - box.left; var h = box.height || box.bottom - box.top; console.log({x:x, y:y ,w:w, h:h}) return {x:x, y:y ,w:w, h:h}; } </script>