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. 数组插件----linq.js

    优点 1.支持jQuery插件的方式.jquery.linq.min.js. 2.也可以像普通js方法一样使用.linq.min.js. 3.当然用习惯VS的童鞋肯定希望有个良好的智能感知,是的,它支 ...

  2. BIP_BI Pubisher的SQL/XSL/FO扩展函数应用（概念）

    2014-12-01 Created By BaoXinjian

  3. 利用recv和readn函数实现readline函数

    在前面的文章中,我们为了避免粘包问题,实现了一个readn函数读取固定字节的数据.如果应用层协议的各字段长度固定,用readn来读是非常方便 的.例如设计一种客户端上传文件的协议,规定前12字节表示文 ...

  4. 让thinkphp 支持ftp上传到远程，ftp删除

    让thinkphp真正的支持FTP上传.删除. 原创by default7#zbphp.com,如需转载请保留作者信息. /** * This is not a free software, All ...

  5. Python exp() 函数

    描述 exp() 方法返回x的指数,ex. 语法 以下是 exp() 方法的语法: import math math.exp( x ) 注意:exp()是不能直接访问的,需要导入 math 模块,通过 ...

  6. 如何用Latex合并多个pdf文件？

    如何用Latex合并多个pdf文件?   用TeX合并pdf, 用LaTeX合并pdf 代码: \documentclass[a4paper]{article} \usepackage{pdfpage ...

  7. 聊天server-解密陌生人（10）位置管理和获取周围一公里陌生人

    提示: 由于project略微有点大对我个人来说.所以可能在某些方面讲的不清楚或逻辑性不够强,假设有问题请@我. 原project:https://github.com/LineChen/ 六.用户位 ...

  8. 如何把scratch转成一个swf文件或者exe执行文件

    scratch作为一款启蒙用的积木式编程软件,非常受人欢迎,但是,现在有一个问题就是,无法将之转变成一个可执行文件,以便和周边的人们分享. 我个人认为把scratch转变为一个可执行的exe文件,并不 ...

  9. 黑客编程教程（十四）单线程TCP端口扫描器

    #include<winsock2.h> #include<stdio.h> #include <time.h> //计时需要用到的头文件 #pragma comm ...

  10. Python 2.7.9 Demo - 014.列表List的定义、取值、遍历

    #coding=utf-8 #!/usr/bin/python list = ['a', 1, 'b', 2, 'c', 3]; print list[0]; print list[1:3]; pri ...