JavaScript-----元素偏移量offset

最新推荐文章于 2025-03-25 11:00:59 发布

Favour72

最新推荐文章于 2025-03-25 11:00:59 发布

阅读量2.8k

点赞数 4

分类专栏： JavaScript 文章标签： javascript java 前端

本文链接：https://blog.csdn.net/weixin_45904557/article/details/125379718

版权

JavaScript 专栏收录该内容

43 篇文章

订阅专栏

一. offset是什么

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意:返回的数值都不带单位

offect系列常用属性:

element.offsetHeight	返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
element.offsetWidth	返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin）
element.offsetLeft	返回当前元素的相对带有定位父元素水平偏移位置的偏移容器
element.offsetParent	返回元素的偏移容器带有定位的父级元素,如果父级都没有定位则返回body
element.offsetTop	返回当前元素的相对带有定位父元素垂直偏移位置的偏移容器

可以得到元素的偏移,位置,返回不带单位的数值

1.element.offsetTop

2.element.offsetLeft

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let father = document.querySelector('.father');
        console.log(father.offsetTop);
        console.log(father.offsetLeft);

有这样一个例子

只有父元素,这时候我们打印一下父元素的偏移量,都是100,可见是和我们设置的margin是有关的

如果margin改成了200像素,那么元素偏移量也会动态的变成200px

这个时候我们在父盒子的内部加一个子盒子来看一下它的元素偏移量

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-left: 45px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let father = document.querySelector('.father');
        let son = document.querySelector('.son');
        //可以得到元素的偏移,位置,返回不带单位的数值
        console.log(son.offsetTop);
        console.log(son.offsetLeft);

如图所示:顶部偏移量为100,左侧偏移量是145,这个145是父盒子距离左侧偏移量再加上子盒子距离父盒子的左侧偏移量得到的,并没有以父盒子为基准,而是以子盒子为基准的偏移量,那为什么不是45呢,子盒子不是在父盒子中的吗,这个时候要注意:

它以带有定位的父盒子为准,如果没有父盒子或者父盒子没有定位,则以body为准

我们尝试一下给父盒子加上相对定位

那么就变成了0 和45

可以得到元素的大小高度和宽度

3.element.offsetHeigh

4.element.offsetWidth

  .one {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            margin-left: 100px;
        }
    </style>

    <div class="one"></div>
        //可以得到元素的大小高度和宽度
        let one = document.querySelector('.one');
        console.log(one.offsetWidth);
        console.log(one.offsetHeight);