offsetParent

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

div{ padding:40px 50px;}

#div1 { background:red;}

#div2 { background:blue; position:relative;}

#div3 { background:orange;}

</style>

<script type="text/javascript">

    window.onload = function() {

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

        //parentNode

        //alert(oDiv3.parentNode);

        //元素.offsetParent 只读属性　离当前元素最近的有定位的父节点

        //如果没有定位父级，默认是body

        //ie7以下，如果当前元素下有定位，默认是body,ie7下如果有定位则是html

        //ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向的触发了layout特性的节点

        alert(oDiv3.offsetParent.id);

    }

</script>

</head>

<body id="body">

    <div id="div1">

        <div id="div2">

            <div id="div3">

            </div>

        </div>

    </div>

</body>

</html>

offsetLeft,offsetTop在各浏览器中的表现差异

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

div{ padding:40px 50px;}

#div1 { background:red;}

#div2 { background:blue; position:relative;}

#div3 { background:orange;}

</style>

<script type="text/javascript">

    window.onload = function() {

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

        /*

            offsetLeft:只读属性　当前　元素以定位父级的距离（偏移值）

                到当前元素的offsetParent的距离

                如果没有定位父级

                    offsetParent -> body

                    offsetLeft[html] -> html

                如果有定位父级

                    ie7：如果自己没有定位，那么offsetLeft[Top]是到body的距离

                        如果自己有定位，那么就是到定位父级的距离

                    其它：到定位父级的距离

        */

        alert(oDiv3.offsetLeft);

    }

</script>

</head>

<body id="body">

    <div id="div1">

        <div id="div2">

            <div id="div3">

            </div>

        </div>

    </div>

</body>

</html>

获取元素结点到页面的绝对距离的方式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

div{ padding:40px 50px;}

#div1 { background:red;}

#div2 { background:blue; position:relative;}

#div3 { background:orange;}

</style>

<script type="text/javascript">

    window.onload = function() {

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

        //alert(oDiv3.offsetLeft);

        /*var iTop = 0;

        var obj = oDiv3;

        while(obj) {

            alert(obj.id + ':' + obj.offsetTop);

            iTop += obj.offsetTop;

            obj = obj.offsetParent;

            alert(obj + obj.id);

        }*/

        //alert(iTop);

        var p = getPos(oDiv3);

        alert(p.left);

        //获取元素结点到页面的绝对距离的方式

        function getPos(obj) {

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

            while(obj) {

                pos.left += obj.offsetLeft;

                pos.top += obj.offsetTop;

                obj = obj.offsetParent;

            }

            return pos;

        }

    }

</script>

</head>

<body id="body">

    <div id="div1">

        <div id="div2">

            <div id="div3">

            </div>

        </div>

    </div>

</body>

</html>

1.offsetParent,offsetLeft,offsetTop的更多相关文章

  1. js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

    1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...

  2. offsetLeft, offsetTop以及postion().left , postion().top有神马区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  4. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  5. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  6. js中offsetLeft,offsetTop,offsetParent计算边距方法

    封装一个函数获得任一元素在页面的位置 var GetPosition= function (obj) { var left = 0; var top = 0; while(obj.offsetPare ...

  7. offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight

    w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...

  8. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  9. .offsetLeft,.offsetTop

    *{ margin:0; padding:0} div {padding: 40px 50px;} #div1 {background: red;} #div2 {background: green; ...

随机推荐

  1. 利用JPEGImageEncoder进行简单的图片压缩

    import java.awt.Dimension; import java.awt.Image; import java.awt.image.BufferedImage; import java.i ...

  2. 在T-SQL语句中访问远程数据库(openrowset/opendatasource/openquery)

    1.启用Ad Hoc Distributed Queries 在使用openrowset/opendatasource前搜先要启用Ad Hoc Distributed Queries服务,因为这个服务 ...

  3. <转>java中静态方法和非静态方法的存储

    Java中非静态方法是否共用同一块内存? 将某 class 产生出一个 instance 之后,此 class 所有的 instance field 都会新增一份,那么所有的 instance met ...

  4. js子页面获取父页面数据

    做页面预览的时候,数据没有存入数据库,但是要打开一个页面进行预览,询问众大婶,原来是这样来做. 1.父页面 <input type="text" id="name& ...

  5. C++中的类和对象(二)

    一,对象的动态建立和释放 1.什么是对象的动态建立和释放 通常我们创建的对象都是由C++编译器为我们在栈内存中创建的,我们无法对其进行生命周期的管理.所以我们需要动态的去建立该对象,因此我们需要在堆内 ...

  6. 复习：IPC机制

    一.为什么需要IPC机制 当我们开启多个进程的时候,我们有时需要和各个进程进行交互.但是进程间的交互就不能够共享对象(就是进程A中创建了一个对象,进程B中的类或者方法不能够直接使用,需要用到IPC机制 ...

  7. flex容器解析

    通常在Flex种有两种形式的容器:布局和导航. 在容器中我们可以同时设置一些空间和子容器,我们可以叫在容器内定义的任何组件为该容器的孩子. 在一个Flex程序的根部是一个叫做Application C ...

  8. Unity FixedUpdate 与 Update 的线程关系实验

    先上结论:FixedUpdate 与 Update 在同一个线程上. 实验过程: 1.打印 FixedUpdate 和 Update 的线程编号 void FixedUpdate () { Debug ...

  9. Hibernate + MySQL中文乱码问题

    如果持久化的类中有包括了汉字的String对象,那么对应到数据库中汉字的部分就会是乱码.这主要是由于MySQL数据表的字符集与我们当前使用的本地字符集不相同造成的. 如果是windows系统,那么系统 ...

  10. ListView嵌套ListView时发生：View too large to fit into drawing cache的问题

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXkxMzg3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...