zoukankan      html  css  js  c++  java

  • 得到对象以及鼠标在页面的绝对位置(转)

    获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位置。

    如下：
    // get absolute Left position
    //建立者:jiarry@hotmail.com
    //返回对象位于窗口的绝对左边距离
    function getAbsoluteLeft( ob ){
    if(!ob){return null;}
      var obj = ob;
      var objLeft = obj .offsetLeft;
      while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
        objLeft += obj .offsetParent.offsetLeft;
        obj = obj .offsetParent;
      }
    return objLeft ;
    }

    // get absolute TOP position
    //建立者:jiarry@hotmail.com
    //返回对象位于窗口的绝对上边距离
    function getAbsoluteTop( ob ){
    if(!ob){return null;}
    var obj = ob;
    var objTop = obj .offsetTop;
    while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
      objTop += obj .offsetParent.offsetTop;
      obj = obj .offsetParent;
    }
    return objTop ;
    }

    获得页面的的宽高，左右边距有这些：
    window.screen.width;
    window.screen.height;
    window.document.body.offsetWidth;
    window.document.body.offsetHeight;
    window.screen.availWidth;
    window.screen.availHeight;
    window.document.body.offsetWidth;
    window.document.body.offsetHeight;
    window.screen.availWidth;
    window.screen.availHeight;
    window.document.body.scrollWidth;
    window.document.body.scrollHeight;
    window.document.body.clientHeight;
    window.document.body.clientWidth;

    通过事件来获得鼠标位置主要有这些:
    e.layerX;
    e.layerY;
    e.pageX;
    e.pageY;
    e.screenX;
    e.screenY;
    e.offsetX;
    e.offsetY;
    e.clientX;
    e.clientY;

    //获得对象相对于父级的位置
    obj .offsetLeft;
    obj .offsetTop;
    obj .offsetWidth;
    obj .offsetHeight;




    --------------------------------------------------------------------------------


    下面是各浏览器关于页面位置的全部属性,包括获得鼠标位于该位置的实时x,y坐标：getPosition.html
    <body>
    <div id="object" style="background-color:green;color:white" onmousemove="getPosition(this,event);" >object,请在此处移动鼠标</div>
    <div id="showinfo"></div>
    <script>

    // get absolute Left position
    //建立者:jiarry@hotmail.com
    //返回对象位于窗口的绝对左边距离
    function getAbsoluteLeft( ob ){
    if(!ob){return null;}
      var obj = ob;
      var objLeft = obj .offsetLeft;
      while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
        objLeft += obj .offsetParent.offsetLeft;
        obj = obj .offsetParent;
      }
    return objLeft ;
    }

    // get absolute TOP position
    //建立者:jiarry@hotmail.com
    //返回对象位于窗口的绝对上边距离
    function getAbsoluteTop( ob ){
    if(!ob){return null;}
    var obj = ob;
    var objTop = obj .offsetTop;
    while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
      objTop += obj .offsetParent.offsetTop;
      obj = obj .offsetParent;
    }
    return objTop ;
    }

    var str="";
    str+="<br><font color=gray>window.screen.width</font> "+window.screen.width;
    str+="<br><font color=gray>window.screen.height</font> "+window.screen.height;
    str+="<br><font color=gray>window.document.body.offsetWidth</font> "+window.document.body.offsetWidth;
    str+="<br><font color=gray>window.document.body.offsetHeight</font> "+window.document.body.offsetHeight;
    str+="<br><font color=gray>window.screen.availWidth</font> "+window.screen.availWidth;
    str+="<br><font color=gray>window.screen.availHeight</font> "+window.screen.availHeight;
    str+="<br><font color=gray>window.document.body.offsetWidth</font> "+window.document.body.offsetWidth;
    str+="<br><font color=gray>window.document.body.offsetHeight</font> "+window.document.body.offsetHeight;
    str+="<br><font color=gray>window.screen.availWidth</font> "+window.screen.availWidth;
    str+="<br><font color=gray>window.screen.availHeight</font> "+window.screen.availHeight;
    str+="<br><font color=gray>window.document.body.scrollWidth</font> "+window.document.body.scrollWidth;
    str+="<br><font color=gray>window.document.body.scrollHeight</font> "+window.document.body.scrollHeight;
    str+="<br><font color=gray>window.document.body.clientHeight</font> "+window.document.body.clientHeight;
    str+="<br><font color=gray>window.document.body.clientWidth</font> "+window.document.body.clientWidth;

    var str1="";
    function getPosition(obj,e){
    str1="";
    //str1 += str;
    str1+="<br><font color=gray>e.layerX</font> "+e.layerX;
    str1+="<br><font color=gray>e.layerY</font> "+e.layerY;
    str1+="<br><font color=gray>e.pageX</font> "+e.pageX;
    str1+="<br><font color=gray>e.pageY</font> "+e.pageY;
    str1+="<br><font color=gray>e.screenX</font> "+e.screenX;
    str1+="<br><font color=gray>e.screenY</font> "+e.screenY;
    str1+="<br><font color=gray>e.offsetX</font> "+e.offsetX;
    str1+="<br><font color=gray>e.offsetY</font> "+e.offsetY;
    str1+="<br><font color=gray>e.clientX</font> "+e.clientX;
    str1+="<br><font color=gray>e.clientY</font> "+e.clientY;
    //
    str1+="<br><font color=gray>obj.offsetLeft</font> "+ obj .offsetLeft;
    str1+="<br><font color=gray>obj.offsetTop</font> "+ obj .offsetTop;
    str1+="<br><font color=gray>obj.offsetWidth</font> "+ obj .offsetWidth;
    str1+="<br><font color=gray>obj.offsetHeight</font> "+ obj .offsetHeight;

    str1+="<hr> 绝对左边距"+ getAbsoluteLeft(obj);
    str1+="<hr> 绝对上边距"+ getAbsoluteTop(obj);
    document.getElementById("showinfo").innerHTML = str1;

    }

    document.write( str );
    //alert(str)
    </script>  
  • 相关阅读:
    Vue 中使用 viewerjs
    PS 给照片换背景
    HTML学习-1网页基础知识
    git使用
    Java读取XML配置文件
    Java是如何读到hbase-site.xml 的内容的
    HBASE count方法总结
    Getting Started with Java Development on Docker
    持续集成案例学习：Docker、Java与Maven
    利用MAVEN打包时，如何包含更多的资源文件
  • 原文地址：https://www.cnblogs.com/aaa6818162/p/1567737.html
Copyright © 2011-2022 走看看