首页 > 代码库 > HTML定位（滚动条、元素，视口）定位
HTML定位（滚动条、元素，视口）定位
<!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>
HTML定位（滚动条、元素，视口）定位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。