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. python 学习之爬虫练习

    通过学习python,写两个简单的爬虫,没用线程,本地抓取速度还不错,有些瑕疵就是抓的图片有些显示不出来,代码做个笔记记录下: # -*- coding:utf-8 -*- import re imp ...

  2. （原+转）ROC曲线

    转自:http://baike.baidu.com/link?url=_H9luL0R0BSz8Lz7aY1Q_hew3JF1w-Zj_a51ggHFB_VYQljACH01pSU_VJtSGrGJO ...

  3. 如何使用NODEJS+REDIS开发一个消息队列

    作者: RobanLee 原创文章,转载请注明: 萝卜李 http://www.robanlee.com MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应 ...

  4. mysql存储过程调试方法

    有如下一个存储过程 ), i_length ),OUT o_result INT) BEGIN SET @a= NULL; SET @b= NULL; SELECT id INTO @a FROM t ...

  5. tab标签切换（无炫效果，简单的显示隐藏）

    从最简单的效果开始写起,一个简单的JQ写出tab切换效果,很静态,没有任何的轮转特效,单纯的点击标签显示区域块. 附上代码: HTML: <div class="wrapper&quo ...

  6. netbeans ide怎么添加yii代码提示

    菜单栏选择工具->选项->php界面里的全局包含路径中选择framework这个文件夹就可以了

  7. Cable master--hdu1551(二分法)

    Cable master Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  8. python学习day7

    目录 一.反射 二.socket 三.socketserver 一.反射 python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分 ...

  9. ISSkin 使用技巧,WinXP 下的窗口阴影

    原文 http://restools.hanzify.org/article.asp?id=109 是否觉得在使用 ISSkin 的时候感觉窗口太过平板,尤其对于那些窗口边缘和窗口内部颜色一致的皮肤尤 ...

  10. 【C++第二课】---C到C++的函数升级

    C++中对C语言在函数使用方面做了很大的升级 一﹑内联函数 1.C++中推荐使用内联函数来替代宏片段代码 2.C++中使用关键字inline声明内联函数 例如: inline int func(int ...