对于不同的元素,不同的浏览器,offsetParent含义不同,有时,指的是直接包含的元素,有时指的是HTML元素,有时不存在offsetParent.

如果所研究的元素没有offsetParent,仅计算该元素自身的偏移位置,否则要将元素的偏移值加到元素的offsetParent偏移值,再重复上面步骤,一级一级递归。

  1. function getPosition(theElement){
  2.  
  3. var positionX = 0;
  4. var positionY = 0;
  5.  
  6. while(theElement != null){
  7. positionX += theElement.offsetLeft;
  8. positionY += theElement.offsetTop;
  9. theElement = theElement.offsetParent;
  10.  
  11. }
  12.  
  13. return [positionX,positionY];
  14. }

Mac下的IE5还考虑了body页变空白或边框距,精确地度量尺度,应该使body上的页边空白和边框距为0.

获取HTML元素位置--js学习笔记的更多相关文章

  1. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  2. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  3. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  4. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  5. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  6. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  7. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  8. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  9. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

随机推荐

  1. Python学习-数据运算

    在Python中有丰富的算术运算,这使得Python在科学计算领域有着很高的地位,Python可以提供包括四则运算在内的各种算术运算. a = 10 b = 20 print(a-b) #-10 pr ...

  2. ansible playbook 使用

    ansible playbook 格式是json  yaml   1. 执行方法 ansible-playbook deply.yml 2. playbook 格式 关键字 hosts 主机ip 主机 ...

  3. bzoj 4555 [Tjoi2016&Heoi2016]求和——NTT+第二类斯特林数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4555 第二类斯特林数展开式: \( S(i,j) = \frac{1}{j!} \sum\l ...

  4. Diffie-Hellman 密钥交换

    假定有两个全局公开的参数,分别为一个素数p和一个整数g,g是p的一个原根,为了协商共享的会话密钥: 首先,用户A随机选取a,计算出A = g^a mod p,并将A发送给B:然后,用户B随机选取b,计 ...

  5. npm run dev报错,events.js:160 throw er; // Unhandled 'error' event

    错误代码如下: vue-project@1.0.0 dev E:MySoftwaretestGitwebpackvue-projectnode build/dev-server.js "80 ...

  6. 【原创】官方文档-hive 启动命令

    [一起学Hive]之十六-Hive的WEB页面接口-HWI Apache Hive 管网 hive metrics hive常用命令整理 Hive学习之HiveServer2服务端配置与启动 启动hi ...

  7. 转:oracle几组重要的常见视图-v$process,v$session,v$session_wait,v$session_event

    v$process 本视图包含当前系统oracle运行的所有进程信息.常被用于将oracle或服务进程的操作系统进程ID与数据库session之间建立联系.在某些情况下非常有用: 1 如果数据库瓶颈是 ...

  8. java mutilThread

    可以参考https://www.cnblogs.com/wxd0108/p/5479442.html 这里补充一下我理解多线程这部分的一些要点. 1.首先是java的monitor概念:https:/ ...

  9. 关于学习ios开发的一些笔记

    关于方法前的 + - 符号 前置加号(+)的方法为类方法,这类方法是可以直接用类名来调用的,它的作用主要是创建一个实例.相当于是静态的方法. 前置减号(-)的方法为实例方法,必须使用类的实例才可以调用 ...

  10. 如何规避javascript多人开发函数重名问题

    命名空间 封闭空间 js模块化mvc(数据层.表现层.控制层) seajs(如果了解的呢,可以说) 变量转换成对象的属性 对象化