offset家族

最新推荐文章于 2023-03-08 16:43:02 发布

Test_晓

最新推荐文章于 2023-03-08 16:43:02 发布

阅读量397

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45473786/article/details/104988859

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章目录

offset家族概念

offset用于获取元素尺寸（认真看完以下一定会有收获）

offset家族五大属性之offsetWidth 和 offsetHeight

offsetWidth 和 offsetHeight 用于获取对象自身的宽度和高度，包括内容、边距、内边距。即：offsetWidth = width + border + padding

示例

详解请看注释

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 200px;
        height: 180px;
        background-color: skyblue;
        padding: 10px;
        border: 1px solid #000;
        margin: 20px;
    }

</style>
<body>
    <div id="box"></div>
    <div id="box1" style="width: 200px"></div>
<script>
    var box = document.getElementById('box');
    console.log(box.offsetWidth);	//200 + 10*2 +1*2
    console.log(box.offsetHeight);	//180 +10*2 +1*2
    console.log(box.style.width);       //输出为空 只能拿行内的
    console.log(box1.style.width);//style.width只对行内样式有效
    
</script>
</body>

在这里插入图片描述

offset家族五大属性之offsetLeft 和 offsetTop

offsetLeft 和offsetTop 表示距离第一个有定位的父级盒子左边和上边的距离。
注意：父盒子必须有定位，如果父盒子没有定位，则最终以body为标准

示例

父盒子无定位

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #father {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 20px; 
    } 

    #box {
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
        margin-left: 20px;
       
    } 
    
</style>
<body>
    <div id="father">
        <div id="box"></div>
    </div>
<script>
    var box = document.getElementById('box');
    //20+20  0+20
    console.log(box.offsetLeft,box.offsetTop);   //相对于body
</script>  
</body>

在这里插入图片描述

父盒子有定位

和上面的代码唯一不同之处是父盒子多了一个定位，其余代码都相同

<style>
    * {
        margin: 0;
        padding: 0;
    }
    #father {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 20px; 
         /* 父盒子有定位 除了static其余属性值都可以*/
        position: absolute;
    } 

    #box {
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
        margin-left: 20px;
       
    } 
    
</style>
<body>
    <div id="father">
        <div id="box"></div>
    </div>
<script>
    var box = document.getElementById('box');
    //20   0
    console.log(box.offsetLeft,box.offsetTop);   //相对于父盒子
</script>  
</body>

在这里插入图片描述

offsetLeft 和 offsetTop 总结

offsetLeft offsetTop从父标签的padding开始计算，不包括border。
即：从子盒子边框到父盒子边框的距离（不包括父子盒子边框）

offset家族五大属性之 offsetParent

offsetParent返回当前对象的父级（带有定位）盒子，可能是父级，也可能是爷爷级，也可能是body（找到第一个就不会往外找了）

示例

这里还展示了offsetParent和parentNode的区别

<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 2 */
    #father {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 20px; 
    } 

    #box {
        width: 100px;
        height: 100px;
        background-color: red;
        padding: 10px;
        margin-left: 20px;   
    } 
    
</style>
<body>
    <div  id="grandf" style="position: absolute;">
        <div id="father" >
            <div id="son"></div>
        </div>
    </div>
<script>
    var son = document.getElementById('son');
    console.log(son.offsetParent);
    console.log(son.parentNode);  //无论有无定位标签 都是拿到父标签
    
 </script>
</body>

在这里插入图片描述

style.与offset.的区别

（1）style.left只能获取行内的，而offsetLeft可以获取到所有的
（2）offsetLeft可以返回没有定位盒子距离左侧的位置，而style.left不可以，其职能返回有定位盒子的left
（3）offsetLeft返回的是数字，而style.left返回的是字符串，除了数字之外还带有单位’px’
（4）如果没有给当前元素指定top样式，则style.top返回的是空字符串
（5）offsetLeft是只读的，而style.left是可读写的

Test_晓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offset家族

文章目录offset家族概念offset家族五大属性之offsetWidth 和 offsetHeight示例offset家族五大属性之offsetLeft 和 offsetTop示例父盒子无定位父盒子有定位offsetLeft 和 offsetTop 总结offset家族五大属性之 offsetParent示例style.***与offset.***的区别offset家族概念offset用于...
复制链接

扫一扫