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. Concurrency Managed Workqueue(二)CMWQ概述

    一.前言 一种新的机制出现的原因往往是为了解决实际的问题,虽然linux kernel中已经提供了workqueue的机制,那么为何还要引入cmwq呢?也就是说:旧的workqueue机制存在什么样的 ...

  2. CLH队列锁

    http://blog.csdn.net/aesop_wubo/article/details/7533186 CLH锁即Craig, Landin, and Hagersten (CLH) lock ...

  3. Python ceil() 函数

    描述 ceil(x) 函数返回一个大于或等于 x 的的最小整数(向上取整). 语法 以下是 ceil() 方法的语法: import math math.ceil( x ) 注意:ceil()是不能直 ...

  4. Andriod Studio中setText输出中文在AVD中显示乱码的解决方法

    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);      ...

  5. k8s的容器监测探针

    大部分的应用程序我们在部署的时候都会适当的添加监控,对于运行载体容器则更应该如此.kubernetes提供了 liveness probes来检查我们的应用程序.它是由节点上的kubelet定期执行的 ...

  6. 巧用tail查看软件的安装进程

    我在使用perlbrew安装perl的时候,学到的一招,呵呵. 有时候,安装软件的时候,特别是手动安装的时候,没有什么提示信息,只能干等着,其实,可以使用tail命令来跟踪安装日志的尾部,来观察安装的 ...

  7. python2.7 跨文件全局变量的方法

    有关python实现跨文件全局变量的方法. 在使用Python编写的应用的过程中,有时会遇到多个文件之间传递同一个全局变量的情况.文件1:globalvar.py #!/usr/bin/env pyt ...

  8. [k8s]通过svc来访问集群podhttp://api:8080/api/v1/namespaces/default/services/mynginx/proxy/

    以往的套路是,安装完成k8s集群后-->安装dns-->安装ingress以便外面访问(或者映射nodeport方式) 如果你不想做任何关于ingress/nodeport一些操作.想通过 ...

  9. Vmware-虚拟机中ubuntu不能联网问题的解决——NAT方式

    设置虚拟机不能联网是很痛苦的,这里我就ubuntu的NAT上网问题就个人经验讲一下,其他的桥连接等没有使用就没有经验了. 1.查看/设置下NAT的网络 打开VMware Workstation, 点击 ...

  10. Solr学习之三 solr配置说明之一

    严格来说,我这篇内容,主要是根据Solr in Action关于配置的说明,以及参考Solr的wiki写的算是读书笔记吧,所有的图片默认来自Solr in Action这本书. 这本书我觉得对学习So ...