原生js中获取offset系列值和 jquery中获取 offset（）的区别

最新推荐文章于 2023-06-27 15:06:03 发布

孤枫_J

最新推荐文章于 2023-06-27 15:06:03 发布

阅读量5.2k

点赞数

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/qq_35809245/article/details/54566211

版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了offset系列在原生JS与jQuery中的应用区别。在原生JS中，offset系列值取决于父元素是否有定位，而在jQuery中，offset始终相对于文档边界。文章通过实例展示了不同情况下offset值的获取与设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：关于offset系列的值

http://blog.youkuaiyun.com/qq_35809245/article/details/53981843

建议大家先看这篇文章，理解offset取值的问题这里简单介绍下：
1 如果父元素有定位，那么子元素的offset是相对于父元素的border内边界的距离，

2 如果父元素没有定位，那么子元素的offset是相对于文档的边界的距离

3 offset系列在原生js中仅仅可读，不可以设置

4 但是在jquery中 offset( ) 不写参数可以获取top left 两个数字类型的值，单位是px

如果写了参数代表可以设置top left

5 jquery官方文档定义offset : 获取匹配元素在当前视口的相对偏移。所以在jquery中永远都是相对于文档边界，而不论父元素是否定位

二太晚了我抓紧撸代码给大家看：

    <style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        border: 5px solid #000;
        position: absolute;
        top: 100px;
        width: 300px;
        height: 200px;

    }
    p{
        border: 1px solid green;
        width: 200px;
        position: absolute;
    }
</style>
<div><p id="p2">这是一个段落</p></div>
<script src="jquery-1.12.2.js"></script>

script标签1 第一种情况：这种情况证明了在jquery中offset( )无论是获取值还是设置值都是相对于文档而言的，不会相对于父元素

<script>
    var offset = $("p2").offset();

    //offset() 方法返回值是两个整形数字，一个top一个 left
    //105  p2距离文档上边界105  ，由div 的  top 100  和border组成
    console.log(offset.left);

     //5  border 5
    //写参数可以设置offset的值，基准还是文档的边界
    var offset = $("p2").offset();

    //offset() 方法返回值是两个整形数字，一个top一个 left

    console.log(offset.top); //50   返回的是上一行代码设置的距离
    console.log(offset.left);//30

</script>

script 标签2 第二种情况，大家不要管script1 里面的内容，可以将其注释掉，自己可以试试效果

<script>
//jquery获取offset值，相对于文档
var offset = $("p:last").offset();
console.log(offset.top); //105
console.log(offset.left);//5
 //js获取offset值，相对于父元素
var p2 = document.getElementById("p2");
console.log(p2.offsetLeft);//0  相对于定位的父元素内边界
console.log(p2.offsetTop);//0

</script>

三总结

1 原生js中通过DOM 操作获取元素的offsetLedt offsetTop 是一个可读的属性，不可设置值，如果父元素定位，那么相对于父元素边界获取offset值，如果父元素没有定位，那么相对于文档边界；
2 而在jquery中offset( ) 可以获取:（）里面没有参数，也可以设置（）里面有top left 的键值对，并且仅仅是相对于文档边界 获取或者设置的，无论父元素是否定位