获取 body 相对于屏幕的坐标

最新推荐文章于 2021-10-17 17:32:38 发布

iteye_19781

最新推荐文章于 2021-10-17 17:32:38 发布

阅读量450

点赞数 1

文章标签： IE Chrome Safari 浏览器 Opera

本文链接：https://blog.csdn.net/iteye_19781/article/details/81823342

版权

获取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>