【javascript基础】之【确定元素坐标】
2012-04-26 16:29 sniper007 阅读(1409) 评论(6) 编辑 收藏 举报【javascript基础】之【确定元素坐标】
IE、FireFox3以及更高版本和Opera9.5以及更高版本都提供了getBoundingClientRect()方法,这个方法返回一个矩形对象,left、top、right、bottom,这些属性返回的是节点相对于浏览器(0,0)坐标(节点相对于视口的位置)的位置。但IE认为文档的左上角坐标是(2,2),而FireFox Opera则将传统的(0,0)作为起点坐标,因此开始的时候,检查一下位于(0,0)的位置。
demo:
<div id="msg" style="width:400px;height:400px;background:#0046a3;margin:40px;"></div>
<script type="text/javascript">
var m = document.getElementById("msg");
function offset(elem){
if(!elem){
throw '不是一个有效的节点';
}
var scrollTop = document.documentElement.scrollTop,
scrollLeft = document.documentElement.scrollLeft,
returnValue = null;
if(elem.getBoundingClientRect){ //支持getBoundingClientRect
if(typeof arguments.callee.offset !== 'number'){
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;top:0;left:0;";
document.body.appendChild(temp);
arguments.callee.offset = - temp.getBoundingClientRect().top - scrollTop; //为了防止函数调用的时候,窗口被滚动了
document.body.removeChild(temp);
temp = null;
}
var rect = elem.getBoundingClientRect(),
offset = arguments.callee.offset;
returnValue = {
left : rect.left + offset,
right : rect.right + offset,
top : rect.top + offset,
bottom : rect.bottom + offset
};
}else{ //不支持getBoundingClientRect
var offsetParent = elem,
left = 0,
top = 0;
while( offsetParent != null ){
left += offsetParent.offsetLeft;
top += offsetParent.offsetTop;
offsetParent = elem.offsetParent;
}
returnValue = {
left : left - scrollLeft,
right : left + elem.offsetWidth - offsetLeft,
top : top - scrollTop,
bottom : top + elem.offsetHeight - scrollTop
};
}
return returnValue;
}
var t = offset(m);
alert('top:' + t.top + '\n' + 'left:' + t.left + '\n' + 'right:' + t.right + '\n' + 'bottom:' + t.bottom);
</script>
<script type="text/javascript">
var m = document.getElementById("msg");
function offset(elem){
if(!elem){
throw '不是一个有效的节点';
}
var scrollTop = document.documentElement.scrollTop,
scrollLeft = document.documentElement.scrollLeft,
returnValue = null;
if(elem.getBoundingClientRect){ //支持getBoundingClientRect
if(typeof arguments.callee.offset !== 'number'){
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;top:0;left:0;";
document.body.appendChild(temp);
arguments.callee.offset = - temp.getBoundingClientRect().top - scrollTop; //为了防止函数调用的时候,窗口被滚动了
document.body.removeChild(temp);
temp = null;
}
var rect = elem.getBoundingClientRect(),
offset = arguments.callee.offset;
returnValue = {
left : rect.left + offset,
right : rect.right + offset,
top : rect.top + offset,
bottom : rect.bottom + offset
};
}else{ //不支持getBoundingClientRect
var offsetParent = elem,
left = 0,
top = 0;
while( offsetParent != null ){
left += offsetParent.offsetLeft;
top += offsetParent.offsetTop;
offsetParent = elem.offsetParent;
}
returnValue = {
left : left - scrollLeft,
right : left + elem.offsetWidth - offsetLeft,
top : top - scrollTop,
bottom : top + elem.offsetHeight - scrollTop
};
}
return returnValue;
}
var t = offset(m);
alert('top:' + t.top + '\n' + 'left:' + t.left + '\n' + 'right:' + t.right + '\n' + 'bottom:' + t.bottom);
</script>
参考:javascript高级程序设计第二版