<!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>
时间： 2024-10-08 20:00:25