对于不同的元素,不同的浏览器,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. NNI (Neurol Network Intelligence) 是微软开源的自动机器学习工具

    NNI (Neurol Network Intelligence) 是微软开源的自动机器学习工具 https://www.cnblogs.com/ms-uap/p/9719071.html [重磅]微 ...

  2. docker -ce(社区免费版)

    Docker -ce https://www.cnblogs.com/zhangxiaoyong/p/9706392.html Docker 是世界领先的软件容器平台.开发人员利用 Docker 可以 ...

  3. 【mssql】SQL Server2012编程入门经典(第四版)(上) 读书笔记

    数据库用了很久了,但好多东西很容易忘记,这次头脑发热想起来读一遍书,做点笔记! 从第五章开始参考:<SQL Server 2005 编程入门经典>学习笔记 一.RDBMS基础:SQL Se ...

  4. ACM学习历程—51NOD 1770数数字(循环节)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1770 这是这次BSG白山极客挑战赛的A题.由于数字全部相同,乘上b必然会 ...

  5. CodeReview是开发中的重要一个环节,整理了一些关于jupiter for java

    什么是代码评审(CodeReview)? 代码评审也称代码复查,是指通过阅读代码来检查源代码与编码标准的符合性以及代码质量的活动. Jupiter提供了代码行级别的评审批注功能,方便评审参与人了解具体 ...

  6. CAN总线标准帧

    CAN总线是一种串行数据通信协议,其通信接口中集成了CAN协议的物理层和数据链路层功能,可完成对通信数据的成帧处理,包括位填充.数据块编码.循环冗余检验.优先级判别等项工作. CAN总线结构 CAN总 ...

  7. Verilog中的UDP

    概述 Verilog HDL语言提供了一种扩展基元的方法,允许用户自己定义元件(User Defined Primitives,UDP).通过UDP,可以把一块组合逻辑电路或者时序逻辑电路封装在一个U ...

  8. linux解压缩基本命令使用

    解压缩命令1.gzip 只能压缩文件,不可压缩目录,压缩后不保留原文件gzip a.txt会删除原文件 生成.gz后缀的文件 a.txt.gz2.gunzip解压.gz的文件gzip -d a.txt ...

  9. [新手教程]windows 2003 php环境搭建详细教程(转)

    对于windows服务器的php环境配置一直是是新人朋友的难题,也难倒了很多高手.这里分享一个新手教程,给那些建站新人使用.本教程来自朋友吴文辉的博客,欢迎大家有时间可以访问他的博客:吴文辉博客htt ...

  10. JavaWeb---总结(十九)Session机制

    一.术语session session,中文经常翻译为会话,其本来的含义是指有始有终的一系列动作/消息,比如打电话时从拿起电话拨号到挂断电话这中间的一系列过程可以称之为一个session.有时候我们可 ...