jQuery-----获取标签元素的位置（offset、position）

最新推荐文章于 2024-08-17 04:10:42 发布

咩有猫腻.

最新推荐文章于 2024-08-17 04:10:42 发布

阅读量1.7k

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/DcTbnk/article/details/105829340

版权

jQuery 专栏收录该内容

49 篇文章

订阅专栏

本文深入探讨了JavaScript中offset与position方法的区别与应用。offset方法不仅能够获取元素相对于页面左上角的位置，还能直接设置该位置，无视定位、margin等属性；而position方法则专门用于获取元素相对于其定位父元素的位置，仅限于读取，不考虑margin。通过具体实例，文章清晰地展示了这两个方法的工作原理。

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

在这里插入图片描述

<script>
    // 获取标签元素的占位

    
    // 1, offset()
    //    可以获取
    //       获取到 页面左上角 的间距
    //    可以设定
    //       设定参数是一个对象
    //       设定的是 当前标签 与 页面左上角 的间距
    //       与 标签 之前,写什么定位,写不写定位,写不写margin,写多少
    //       都没有任何关系, offset() 写多少,跟 页面左上角 就间距多少
    
    console.log($('p').offset());    //object里{top:240,left:340}



    // 以定位形式来设定 与 页面左上角的间距
    $('p').offset({left:0 , top:0});

    
    // 2, position()
    //    获取 当前标签 与 父级标签的 位置关系 --- 只获取定位的数值
    //    执行结果是一个对象
    //    只能获取,不能设定,不能传参

    // 获取p标签与定位父级div之间的定位关系
    console.log( $('p').position()  );   //对象{top:100,left:200}

    
    // offset()
    //    能获取能设定
    //    都是 与 页面左上角的 间距
    //    不管是什么,就获取或者设定与页面左上角的间距

    // position()
    //    只能获取,不能设定
    //    与父级的间距
    //    但是 只 获取定位的属性
    //    如果有 margin 是 不计算的
    //    因为 margin 本身也算是 标签占位一部分

</script>