对于不同的元素,不同的浏览器,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. 完整的验证码识别流程基于svm(若是想提升,可优化)

    字符型图片验证码识别完整过程及Python实现 首先很感觉这篇文章的作者,将这篇文章写的这么好.我呢,也是拿来学习,觉得太好,所以忍不住就进行了转载. 因为我个人现在手上也有个验证码识别的项目,只是难 ...

  2. 实现一个scnprinf

    #include <stdio.h> #include <stdarg.h> /* 该函数ret = min(size, 实际写入长度) - 1,即ret永远小于size * ...

  3. 剑指offer-第四章解决面试题的思路(栈的压入和弹出序列)

    题目:输入两个整数序列,第一个序列表示栈的压入序列,请判断第二个序列是否为弹出序列. 思路:定义两个指针sPush和sPop分别指向两个整数序列的开头,借助一个辅助的栈,将第一个序列的数据依次压入栈中 ...

  4. 【转】C# Socket编程(5)使用TCP Socket

    [转自:https://www.cnblogs.com/IPrograming/archive/2012/10/18/CSharp_Socket_5.html] TCP 协议(Transmission ...

  5. 转载论文关于fir滤波器的fpga实现

    摘 要 本文讨论的FIR滤波器因其具有严格的线性相位特性而得到广泛的应用.在工程实践中,往往要求信号处理具有实时性和灵活性,本论文研究FIR的FPGA解决方案正体现了电子系统的微型化和单片化. 本论文 ...

  6. centos6.5 安装nginx

    安装之前先安装VMware tools(方便于从windows上拷贝文件到linux) 1. nginx安装环境 nginx是C语言开发,建议在linux上运行,本次使用Centos6.5作为安装环境 ...

  7. 一周学会HTML----Day02常用标签(上)

    扩展 在开始第二天的课程之前,我们先来拓展两个概念. 第一个是前台和后台:前台是指用户看到的界面,而后台是指相关具有前线的人操作的界面 第二个是前端和后端:前端是值用户看到的界面和界布的操作(安卓.i ...

  8. shell中字体变色

    在linux中给字体使用数字代码变色 字体颜色代码:重置0 ,黑色30,红色31,绿色32,黄色33,蓝色34,洋红35,青色36,浅灰37 效果代码:1m加粗  2m加下划线  5m闪动效果  7m ...

  9. 网络监控之一:netstat命令

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  10. php中的list方法

    list 栗子一: <?php $info = array('coffee', 'brown', 'caffeine'); // 列出所有变量 list($drink, $color, $pow ...