1.　offsetLeft[Top]

　　当前元素到定位父级(即offsetParent)的距离（偏移值 ）。
　　父级没有定位：
　　offsetParent -> body
　　offsetLeft[Top] -> html

　　父级有定位：
　　ie 7:
　　　　如果自己没有定位，那么offsetLeft[Top]是到body的距离。
　　　　如果自己有定位，那么就是到定位父级的距离。
　　其他：
　　　　到定位父级的距离。

2.元素宽高

　　元素.style.width : 样式宽，带单位；

　　元素.clientWidth : 可视区宽（样式宽 + padding），不带单位；

　　元素.offsetWidth : 占位宽（可视区宽 + border），不带单位；

　　高与宽类似，将width 替换为 height即可。

3.获取元素位置的函数
<!DOCTYPE html>

<html>

<head>

    <title>获取元素的位置</title>

    <meta charset="utf-8">

    <style type="text/css">

        div{padding:30px 40px;}

        #div1{border:2px dashed red;}

        #div2{border:2px dashed green;}

        #div3{border:2px dashed blue;}

    </style>

</head>

<body>

    <div id="div1">

        <div id="div2">

            <div id="div3">

            </div>

        </div>

    </div>

    <script type="text/javascript">

        var oDiv3 = document.getElementById('div3');

        var p = getPos(oDiv3);

        function getPos(obj){

            var pos={"left":0,"top":0};

            while(obj){

                pos.left += obj.offsetLeft;

                pos.top += obj.offsetTop;

                obj = obj.offsetParent;

            }

            return pos;

        }

        alert(p.left); //弹出92

        alert(p.top); //弹出72

    </script>

</body>

</html>

js学习笔记17----元素的各种位置，尺寸的更多相关文章

  1. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  2. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  3. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  4. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  5. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  6. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  7. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  8. Ext.Net学习笔记17：Ext.Net GridPanel Selection

    Ext.Net学习笔记17:Ext.Net GridPanel Selection 接下来是Ext.Net的GridPanel的另外一个功能:选择. 我们在GridPanel最开始的用法中已经见识过如 ...

  9. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

随机推荐

  1. 转： javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  2. Linux调度器 - deadline调度器

    一.概述 实时系统是这样的一种计算系统:当事件发生后,它必须在确定的时间范围内做出响应.在实时系统中,产生正确的结果不仅依赖于系统正确的逻辑动作,而且依赖于逻辑动作的时序.换句话说,当系统收到某个请求 ...

  3. Linux 关机 休眠, 关闭移动设备自动挂载 命令

    "+++++++++++++++++++++++++ Linux 关机.休眠命令 +++++++++++++++++++++++++++++++++++++++"indows7关机 ...

  4. apache主机（网站）配置，port监听，文件夹訪问权限及分布式权限

    前言 一个网站的两个核心信息为: 主机名称(server名/网站名):ServerName server名 网站位置(网站文件夹路径):DocumentRoot "实际物理路径" ...

  5. Xfire实现webservice时，对象传递规则及解析简析

    Xfire实现webservice,传递对象解析的话,要分两种情况处理:1.基本类型对象:2.复杂对象 其实,在客户端直接传递数组,如String[] int[]等这些无法通过配置具体类型来通知xfi ...

  6. python标准库介绍——20 cStringIO 模块详解

    ==cStringIO 模块== ``cStringIO`` 是一个可选的模块, 是 ``StringIO`` 的更快速实现. 它的工作方式和 ``StringIO`` 基本相同, 但是它不可以被继承 ...

  7. [hihoCoder] #1055 : 刷油漆

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到,小Ho有着一棵灰常好玩的树玩具!这棵树玩具是由N个小球和N-1根木棍拼凑而成,这N个小球都被小Ho标上了不同的数 ...

  8. 用rfkill命令管理蓝牙和wifi

    rfkill是一个内核级别的管理工具,可以打开和关闭设备的蓝牙和wifi. #列出所有可用设备rfkill list 输出如下:0: phy0: Wireless LAN    Soft blocke ...

  9. ubuntu的交换分区和系统休眠

    因为休眠功能在部分计算机上不能正常工作,所以自16.04后,ubuntu不在默认开启休眠功能. 要开启休眠功能需要如下条件. 1.要有交换分区(swap). 2.交换分区的容量至少要和实际内存一样大, ...

  10. 【Android】3.12 兴趣点（ POI）搜索功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 POI(Point of Interest),中文可以翻译为“兴趣点”.在地理信息系统中,一个POI ...