首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

DOM- offset家族及匀速运动动画六（2）

论坛元老

Rank: 8Rank: 8

UID
1066743 
1#
打印
tT
look_w发表于 2019-3-3 19:21 | 只看该作者

DOM- offset家族及匀速运动动画六（2）

offsetParent 检测父系盒子中带有定位的父盒子节点

1、返回该对象的父级 （带有定位）
如果当前元素的父级元素没有进行CSS定位（position为absolute或 relative，fixed）， offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 （position为absolute或 relative，fixed），offsetParent取最近的那个父级元素。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div class="box1" style="position: absolute;">
        <div class="box2" style="position: fixed;">
            <div class="box3"></div>
        </div>
    </div>
     
    <script>
        //offsetParent：复习盒子中带有定位的盒子
        //复习盒子中都没有定位，返回body
        //如果有，谁有返回最近哪个
     
        var box3 = document.getElementsByClassName("box3")[0];
     
        console.log(box3.offsetParent);
     
    </script>
     
    </body>
    </html>

offsetLeft和style.left的区别

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box1 {
                width: 300px;
                height: 300px;
                padding: 100px;
                margin: 100px;
                position: relative;
                border: 100px solid #000;
                background-color: pink;
            }
            .box2 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 10px;
                top: 10px;
            }
        </style>
    </head>
    <body>
    <div class="box1">
        <div class="box3">
            <div class="box2" style="left: 10px"></div>
        </div>
    </div>
     
    <script>
     
        var box2 = document.getElementsByClassName("box2")[0];
     
        //offsetTop和offsetLeft
        console.log(box2.offsetLeft);
        console.log(box2.style.left);
     
    //    一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
        //如果父系盒子中都没有定位，以body为准。
        //style.left只能获取行内式，如果没有返回“”;
     
    //    二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
        //div.offsetLeft = 100;    div.style.left = "100px";
     
    //    三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
        //style.left和style.top可以赋值
        //offsetLeft和offsetTop只能获取值
     
    //    四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
        //style.left只能获取行内式，如果没有返回“”;
     
     
    </script>
     
    </body>
收藏 分享 评分
回复 引用

订阅 TOP

返回列表