对于不同的元素,不同的浏览器,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. 复制的web工程为什么不能部署到tomcat

    An existing resource has been found at location D:\apache-tomcat-6.0.18\apache-tomcat-6.0.18\webapps ...

  2. 如何开启 FastAdmin 的顶部导航功能?

    如何开启 FastAdmin 的顶部导航功能? FastAdmin 默认的是侧边导航,但是如果功能多的时候就有会眼花缭乱,使用顶部导航就会清晰很多. 好消息现在已经支持顶部导航,可以在demo.fas ...

  3. 记一次RESTful调试过程

    1. 为什么前台怎么调用后台,都是跳到页面不存在. 因为已经改为RESTful,保存按钮的type还是submit: 2. 改成buttong之后,设置onclick="update()“, ...

  4. NOIp2018 D2T3 defense——树上倍增

    题目:https://www.luogu.org/problemnew/show/P5024 考场上只会写n,m<=2000的暴力,还想了想A1和A2的情况,不过好像只得了A1的分.然后仔细一看 ...

  5. TPS和QPS区别

    TPS和QPS区别 http://blog.csdn.net/kobejayandy/article/details/9374747

  6. MFC命令消息的路由

    下面,我们以Menu这个程序为例,来看看 菜单命令消息路由的具体过程:当单击某个菜单项时,最先接收到这个菜单命令消息的是框架类.框架类将把接收到的这个消息交给它的子窗口.即视类,由视类首先进行处理.视 ...

  7. 别人的dubbo学习笔记

    本文转载自:http://blog.csdn.net/tao_qq/article/details/49952229 学习dubbo,开始做一些笔记. 1> 启动dubbo-admin模块的时候 ...

  8. 【转载】解决SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问的方法

    1.开启Ad Hoc Distributed Queries组件,在sql查询编辑器中执行如下语句: exec sp_configure 'show advanced options',1 recon ...

  9. python学习(六) 抽象

    6.1 懒惰即美德 斐波那契数列: >>> fabs = [0, 1]>>> for i in range(8): fabs.append(fabs[-1] + f ...

  10. 操盘策略:KDJ三线合一 必定孕育大牛股

    日周月KDJ指标三周期合一是孕育大牛股的必要条件: 炒股看一下周.月线十分有必要,很多时候,周.月线已经死叉下行,中长线趋势走坏,但日线偏偏发出金叉,K线也走好,量价配合也好,而此时介入,多数情况下就 ...