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. V - stl 的 优先队列 Ⅱ

    Description Because of the wrong status of the bicycle, Sempr begin to walk east to west every morni ...

  2. Apache的httpd命令详解

    Apache的httpd命令详解 来源:全栈开发者 发布时间:2012-01-03 阅读次数:10965 4   httpd.exe为Apache HTTP服务器程序.直接执行程序可启动服务器的服务. ...

  3. AngularJS的指令(Directive) compile和link的区别及使用示例

    如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...

  4. 工作中使用seajs后的一些总结

    工作中用seajs一段时间了,小小地总结一下. 使用seajs五部曲: 1.布置你项目的目录结构 2.设置seajs的config项,我一般是单独一个js文件--> seajs-config.j ...

  5. asp.net MVC4 +MVCpager 无刷新分页

    本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第 ...

  6. Excel导入到DataTable

    1.前台代码 <asp:FileUpload ID="fupFiles" runat="server" /> <asp:Button ID=& ...

  7. CompressFilterAttribute 文件压缩特性

    /// <summary> /// 文件压缩特性 /// </summary> public class CompressFilterAttribute : ActionFil ...

  8. 镍钯金工艺（ENEPIG）详解

    一.镍钯金工艺(ENEPIG)与其他工艺如防氧化(OSP),镍金(ENIG)等相比有如下优点: 1.防止“黑镍问题”的发生–没有置换金攻击镍的表面做成晶粒边界腐蚀现象. 2.化学镀钯会作为阻挡层,不会 ...

  9. Android 自定义View之BounceProgressBar

    之前几天下载了很久没用了的桌面版酷狗来用用的时候,发现其中加载歌曲的等待进度条的效果不错(个人感觉),如下: 然后趁着这周末两天天气较冷,窝在宿舍放下成堆的操作系统作业(目测要抄一节多课的一堆堆文字了 ...

  10. wordpress All in one Seo

    原文地址:http://www.7adesign.com/155.html WordPress插件All-in-one-seo-pack详细设置: I enjoy this plugin and ha ...