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

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

function getPosition(theElement){

    var positionX = 0;
var positionY = 0; while(theElement != null){
positionX += theElement.offsetLeft;
positionY += theElement.offsetTop;
theElement = theElement.offsetParent; } return [positionX,positionY];
}

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. 使用Metaspoit攻击MS08-067

    kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 使用Metaspoit攻击MS08-067 MS08-067漏洞的全称为 ...

  2. spring的笔记1 关云长

    1.1   实例化方式 l  3种bean实例化方式:默认构造.静态工厂.实例工厂 1.1.1  默认构造 <bean id="" class=""> ...

  3. ASP.NET的几个试题(《C#与.NET程序员面试宝典》)

    更多参考:博客园笔记 :ASP.NET是什么 ASP.NET不是一种语言,而是创建动态Web页的一种强大的服务器端技术,它是Microsoft.NET Framework中一套用于生成Web应用程序和 ...

  4. maxsigma

    10^8 768 10^7 448 10^6 240 10^5 128

  5. 【spring源码学习】spring的IOC容器在初始化bean过程

    [一]初始化IOC的bean的时候Spring会执行的一些回调方法 (1)spring bean创建的前置处理 =>ApplicationContextAwareProcessor 在创建bea ...

  6. 【3】SpringMVC的Controller

    1SpringMvc的Controller是线程安全的吗? (1)由于是单例,tomcat的多线程环境访问,属性必须是不可变的,如果可变,会产生脏数据,线程不安全 2Spring的事务管理 (1)ao ...

  7. 学习动态性能表(5)--v$session

    学习动态性能表 第五篇--V$SESSION  2007.5.29 在本视图中,每一个连接到数据库实例中的session都拥有一条记录.包括用户session及后台进程如DBWR,LGWR,arcch ...

  8. Java中判断非空对象.

    Java中经常会遇到判断非空的时候. 有的时候判断了非空但是还是报空指针,为什么.? 判断的时候一般都会判断两次.类似于: Org o = new Org(); if ( o.getId()!=nul ...

  9. <转>CentOS 7 安装配置 NFS

    CentOS 7  安装配置 NFS 环境 nps 192.168.1.97 client 192.168.1.98 一.yum 安装 yum -y install nfs-utils rpcbind ...

  10. PHP中的精确计算bcadd,bcsub,bcmul,bcdiv

    引言:一定要确保数据的准确性.这是一个好的程序员的基本素养. <?php /** * 精确加法 * @param [type] $a [description] * @param [type] ...