热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

获取当前元素节点的position和宽高(兼容)

functionobjxy(n){varodocument.getElementById(n),x0,y0,wo.offsetWidth,ho.offsetHe
function objxy(n){
    
    var o=document.getElementById(n),x=0,y=0,w=o.offsetWidth,h=o.offsetHeight
    if(o.getBoundingClientRect)
    {
        x=o.getBoundingClientRect().left+document.body.scrollLeft
        y=o.getBoundingClientRect().top+document.body.scrollTop
    }
    else
    {
        while(o!=null && o.tagName.toUpperCase()!="BODY")
        {
            x+=o.offsetLeft
            y+=o.offsetTop
            o=o.offsetParent
        }
    }
    return [x,y,w,h]
}      

1、getBoundingClientRect: 这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。

document.documentElement.clientTop;  // 非IE为0,IE为2 在火狐的firebug中输入document.documentElement.clientTop就能看的返回值为0

2、scrollTop:第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度

3、兼容解决 obj.offsetTop 指 obj 距离上方或上层控件的位置;利用while循环,来进行累加。offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。parentObj = element.offsetParent

4、总结

 

scrollHeight: 获取对象的滚动高度。

 

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

 

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

 

scrollWidth:获取对象的滚动宽度

 

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

 

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

 

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

 

event.clientX 相对文档的水平座标

 

event.clientY 相对文档的垂直座标

 

event.offsetX 相对容器的水平坐标

 

event.offsetY 相对容器的垂直坐标

 

document.documentElement.scrollTop 垂直方向滚动的值

 

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

 


推荐阅读
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案
    本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题,并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式,我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的,因此无需担心会话信息被覆盖的问题。需要注意的是,本文讨论的是多个客户端级别上的多用户登录,而非同一个浏览器级别上的多用户登录。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • 涉及的知识点-ViewGroup的测量与布局-View的测量与布局-滑动冲突的处理-VelocityTracker滑动速率跟踪-Scroller实现弹性滑动-屏幕宽高的获取等实现步 ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • ZSI.generate.Wsdl2PythonError: unsupported local simpleType restriction ... [详细]
  • 关键词:Golang, Cookie, 跟踪位置, net/http/cookiejar, package main, golang.org/x/net/publicsuffix, io/ioutil, log, net/http, net/http/cookiejar ... [详细]
  • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
  • Java在运行已编译完成的类时,是通过java虚拟机来装载和执行的,java虚拟机通过操作系统命令JAVA_HOMEbinjava–option来启 ... [详细]
  • 解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法
    本文介绍了解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法,包括检查location配置是否正确、pass_proxy是否需要加“/”等。同时,还介绍了修改nginx的error.log日志级别为debug,以便查看详细日志信息。 ... [详细]
  • CEPH LIO iSCSI Gateway及其使用参考文档
    本文介绍了CEPH LIO iSCSI Gateway以及使用该网关的参考文档,包括Ceph Block Device、CEPH ISCSI GATEWAY、USING AN ISCSI GATEWAY等。同时提供了多个参考链接,详细介绍了CEPH LIO iSCSI Gateway的配置和使用方法。 ... [详细]
  • 图像因存在错误而无法显示 ... [详细]
  • 本文讨论了在VMWARE5.1的虚拟服务器Windows Server 2008R2上安装oracle 10g客户端时出现的问题,并提供了解决方法。错误日志显示了异常访问违例,通过分析日志中的问题帧,找到了解决问题的线索。文章详细介绍了解决方法,帮助读者顺利安装oracle 10g客户端。 ... [详细]
  • 本文实例讲述了Android编程实现读取工程中的txt文件功能。分享给大家供大家参考,具体如下:1.众所周知,Android的res文件夹 ... [详细]
author-avatar
谢世雯62956
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有