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. DBA_Oracle Erp R12系统文件结构（概念）

    20150609 Created By BaoXinjian

  2. Js 常用函数【持续更新】

    Js Math对象方法介绍:http://www.w3school.com.cn/jsref/jsref_obj_math.asp 1. 算数函数(Math) 1)Js小数取整 常用于:分页算法 js ...

  3. scala-trait实现AOP编程

    步骤1:声明表示基本动作方法的模块Taction //声明表示基本动作方法的模块Taction trait TAction { def doAction } 步骤2:定义一下加入了前置处理和后置处理的 ...

  4. C++中虚基类在派生类中的内存布局

    今天重温C++的知识,当看到虚基类这点的时候,那时候也没有太过追究,就是知道虚基类是消除了类继承之间的二义性问题而已,可是很是好奇,它是怎么消除的,内存布局是怎么分配的呢?于是就深入研究了一下,具体的 ...

  5. nginx location URI匹配规则

    当nginx收到一个请求后,会截取请求的url部份,去搜索所有location指令中定义的URI匹配模式.在server模块中可以定义多个location指令来匹配不同的url请求,多个不同的loca ...

  6. .NET Garbage-Collectors

    http://mattwarren.org/tags/#Garbage-Collectors https://github.com/dotnet/coreclr/issues https://lldb ...

  7. angular学习笔记(二十)-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  8. HTML5使用详解

    1.什么是HTML5 HTML5是新的HTML标准. 支持最新的Safari,Chrome,Firefox以及Opera,Ie9支持某些HTML5特性. 2.新建HTML5页面 <!DOCTYP ...

  9. 命令运行带参数的jar

    一.打包(此处用的是eclipse) 代码如下,此如引用了某博主的代码,因忘记地址,如博主发现此文,可私信我 package com.example.Open; import java.io.File ...

  10. 配置maven为阿里云加速

    <repositories> <repository> <id>nexus-aliyun</id> <name>Nexus aliyun&l ...