<!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>