对于不同的元素,不同的浏览器,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. python学习-实现用户密码登录,输错三次锁定

    作业需求: 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 实现思路: 判断用户是否在黑名单,若在黑名单,则将用户锁定 判断用户是否存在,若不存在,提示用户不存在 若用户存在,判断登录密码是否 ...

  2. Robot Framework接口测试(4)

    现在我们已经做好了进行接口测试的必要准备:1.拼接发送的报文:2.发送报文的方法.现在我们实现RF上的接口测试. 我们先对发送的方法进行一下封装: 1.拼接报文方法: #coding : utf-8 ...

  3. fn project 打包Function

      Option 1 (recommended): Use the fn cli tool We recommend using the fn cli tool which will handle a ...

  4. maven编译问题:maven编译成功,eclipse文件未编译

    我们先来看一个正常的编译流程: 1.从svn上检出一个项目: 2.看该工程是否为maven项目,不是则先转为maven项目:右键单击项目,选择configure->Convert to Mave ...

  5. Spring BeanPostProcessor与动态加载数据源配置

    前言: 本文旨在介绍Spring动态配置数据源的方式,即对一个DataSource的配置诸如jdbcUrl,user,password,driverClass都通过运行时指定,而非由xml静态配置定死 ...

  6. python3+ros api

    官方文档:https://wiki.mikrotik.com/wiki/Manual:API_Python3 # !/usr/bin/env python# -*- coding:utf-8 -*-# ...

  7. git的分布式和集中式

    当然,Git的优势不单是不必联网这么简单,后面我们还会看到Git极其强大的分支管理,把SVN等远远抛在了后面.

  8. python学习(十三) 数据库支持

    13.1 Python数据库编程接口(API) 13.1.1 全局变量 13.1.2 异常 13.1.3 连接和游标 13.1.4 类型 13.2 SQLite和PySQlite 13.2.1 入门 ...

  9. C#中Monitor对象与Lock关键字的区别分析

    这篇文章主要介绍了C#中Monitor对象与Lock关键字的区别,需要的朋友可以参考下 Monitor对象 1.Monitor.Enter(object)方法是获取 锁,Monitor.Exit(ob ...

  10. 详解调试Apache的mod_rewrite模块

    大家都知道Apache里面的Rewrite规则是一件很蛋疼的事情,有时候只是想做一个伪静态而已,不想去研究那些复杂的规则,可官方给的规则又常常出错,出了问题我们就要调试一下,看看提交的参数被映射到了哪 ...