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. iOS9基础知识（OC）笔记

    1月16日 Objective  C(20世纪80年代初) 一.OC语言概述 1.1985年,Steve  Jobs成立了NeXT公司 2.1996年,12月20日,苹果公司宣布收购了NeXT  ...

  2. C#的Socket编程

    Microsoft.Net Framework为应用程序访问Internet提供了分层的.可扩展的以及受管辖的网络服务,其名字空间System.Net和System.Net.Sockets包含丰富的类 ...

  3. RMAN之一：快速入门

    1.数据导出基础 (1)创建datapump导出文件的目录对象并为相应用户授予权限. 出于安全考虑,不允许oracle用户直接在OS上进行文件的操作,而应通过directory对象指定. SQL> ...

  4. margin-top失效及解决办法

    现象:当两个空的块级元素嵌套时,如果内部的块设置有margin-top属性,而且父元素没有下边解决方法所述的特征,那么内部块的margin-top属性会绑架父元素(即将margin-top传递凌驾给了 ...

  5. Big Number

    问题陈述: 杭州电子科技大学 HANGZHOU DIANZI UNIVERSITY Online Judge Problem - 1018 问题解析: 公式一: n! = 10^m => lg( ...

  6. Oracle EBS-SQL (CST-1):检查BOM历史成本查询(Average Cost).sql

    select  msi1.segment1                   父件编码, msi1.description                  父件描述, msi1.primary_u ...

  7. avd name对AVD的创建的影响

    创建avd的时候出现OK按钮显示灰色不可按状态,各种系数都显示对的.如下所示: 检查了各项觉得没有什么错,最后原来出错在AVD的name上面,不允许有空格或者非英文字母,把空格取消之后就没有问题了.

  8. 进程退出前删除自身EXE

    进程退出前删除自身EXE 下面的代码由Gary Nebbett写就.Gary Nebbett乃是WINDOWS NT/2000 NATIVE API REFERENCE的作者.乃NT系统一等一的高手. ...

  9. 在WPF中自定义你的绘制（一）

    原文:在WPF中自定义你的绘制(一)   在WPF中自定义你的绘制(一)                                                                 ...

  10. 从txt中读入数据到数组中(fscanf)

    C-sources: #include<stdio.h> int main() { FILE* fp; //定义一个文件 fp = fopen("p5.txt",&qu ...