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. ios 项目被拒绝各种理由

    . Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound by ...

  2. [Effective Modern C++] Item 5. Prefer auto to explicit type declarations - 相对显式类型声明，更倾向使用auto

    条款5 相对显式类型声明,更倾向使用auto 基础知识 auto能大大方便变量的定义,可以表示仅由编译器知道的类型. template<typename It> void dwim(It ...

  3. windows8开发学习笔记

    XAML行列定义 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...

  4. php封装redis负载均衡类

    $array = array( 'master' => array( "redis://127.0.0.1:6379?timeout=1", ), 'slave' => ...

  5. SD卡在单片机上的应用

    (1)SD卡的引脚定义:  SD卡SPI模式下与单片机的连接图: 注意:SPI模式时,这些信号需要在主机端用10~100K欧的电阻上拉.      SD卡支持两种总线方式:SD方式与SPI方式.    ...

  6. git 拉取远程分之到本地

    git checkout -b newbranch_name --track origin/feature/newbranch_name 如果遇到类似: fatal: git checkout: up ...

  7. 基础巩固（二）- log4j的使用

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...

  8. PIE(二分） 分类： 二分查找 2015-06-07 15:46 9人阅读 评论(0) 收藏

    Pie Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submissio ...

  9. API经济产业

    技术大咖为我们铺好了前进道路,我们为什么还要敬而远之舍近索远呢?充分利用开源,利用API进行App有效整合. 为应用添加日志功能,Loggly; 为应用添加用户管理和身份认证模块,Stormpath; ...

  10. CGFW时装发布及活动整体一览表

    CGFW时装发布及活动整体一览表 CGFW时装发布及活动整体一览表