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. if you are not making someone else's life better, then you are wasting your time.– Will Smith如果你不能给别人的生活带来改善，那么你就是在浪费你的宝贵时间。 --威尔 史密斯(程序员，你做的东西...)

    if you are not making someone else's life better, then you are wasting your time. – Will Smith 如果你不能 ...

  2. NRF24L01使用外部中断读取数据的问题

    NRF24L01读取数据不能使用中断的方式,原因如下: 首先NRF24L01中断触发时,IRQ引脚会一直保持低电平直到状态寄存器中的中断标志被重新清零. stm32的外部中断触发方式只有上升沿或者下降 ...

  3. Struts如何获取客户端ip地址

    在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的.但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实I ...

  4. 中国计算机学会CCF推荐国际学术期刊会议（最新版）

    中国计算机学会推荐国际学术期刊会议 2014年12月,中国计算机学会(CCF)启动新一轮<)计算机体系结构/高性能计算/存储系统: )计算机网络:)网络与信息安全:)软件工程/系统软件/程序设计 ...

  5. 不能与abstruct共同修饰方法的关键字

    一 抽象类:动态方法至少有一个是抽象方法. 其中abstruct关键字修饰的方法不能与哪些关键字共同修饰? 1private 因为private修饰的方法在子类中是隐藏的.不可见的.而abstruct ...

  6. linux centos7 常用命令【systemctl替换service】

    虽然linux的命令很多都是相同的,但是新版的centos 7 上面与以前的有些命令还是有所不同,不过还好,有提示.所以就在百度上面搜索了以下,作为记载,以后方便查看: centos7 上面启动服务以 ...

  7. angularJS双向绑定和依赖反转

    一.双向绑定: UI<-->数据 数据->UI (数据改变UI跟着变) UI->数据 (UI改变数据跟着变) 数据改变->UI改变原理: 监听数据是否改变,如果改变更新U ...

  8. 【Android】6.3 ProgressDialog

    分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 进度条对话框(ProgressDialog)常用于不能在短时间内快速完成的操作,显示进度条的目的是为了让用户明白程 ...

  9. HDU 4670 Cube number on a tree ( 树的点分治 )

    题意 : 给你一棵树 . 树的每一个结点都有一个权值 . 问你有多少条路径权值的乘积是一个全然立方数 . 题目中给了你 K 个素数 ( K <= 30 ) , 全部权值都能分解成这k个素数 思路 ...

  10. C# 使用Nlog记录日志到数据库

    [摘要]Nlog是一个很不错的.NET日志记录组件,它可以将日志输出到控件台,保存到文本,也可以很方便的记录到数据库中.本文为你介绍C# 使用Nlog记录日志到数据库. Nlog是一个很不错的.NET ...