获取body相对于屏幕的位置,还是比较郁闷的,下面是本人的方法:
可选择的有screenLeft,screenTop,screenX,screenY,不过由于工具栏高度未知,所以很难计算出body的位置.
ie:window.screenLeft,window.screenTop为body相对于屏幕的位置(或许是html元素),(不用担心高度不定的工具条了)...
opera: 和IE一样, screenX和screenY始终为-4和-23,奇怪...(也不用担心可以随意拖动高度的工具条了)
ff: screenTop无值,screenY为浏览器相对于屏幕的位置...这样要加上工具条高度,(不过工具条高度不一定啊)...因此ff是无解的...
safari和chrome 取到的值也是浏览器在屏幕的位置,也无解
废话不多,上终极方法,就是e.screenX-e.clientX和e.screenY-e.clientY,就能取到body相对于屏幕的偏移,只是,要用户鼠标动一下才能取到值...
<!DOCTYPE html>
<head>
<style>
body,html{
background: blue;
}
</style>
<script>
function onInit(e){
var e = e||window.event;
//除ff
//alert([window.screenLeft,window.screenTop]);
//除ie (不过op取到的值有些怪异)
//alert([window.screenX,window.screenY]);
//由于状态栏的不确定,导致下面方法基本是无用的
//alert([window.outerHeight,window.innerHeight,window.outerHeight-window.innerHeight])
//用事件取值大法
getBodyOffset();
}
function getBodyOffset(){
if(window.attachEvent)
document.attachEvent("onmousemove",getScreenPx);
else if(window.addEventListener)
document.addEventListener("mousemove",getScreenPx,false);
}
function getScreenPx(e){
var e = window.event||e;
window.bodyOffset = [e.screenX-e.clientX,e.screenY-e.clientY];
}
</script>
</head>
<body onload="onInit(event)">
<div style="width:300px;height:600px;border:1px solid red;"></div>
<input type="button" onclick="alert(window.bodyOffset)" />
</body>
</html>