Question

位置和偏移方法之间是否有任何区别。因为当我执行console.log()时，两者都返回一个对象，顶部和左侧有两个属性。我怀疑的是，当我们使用偏移时，当位置方法或两者都做同样的事情时。

HTML ：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <meta charset="utf-8">
        <title>Difference between jQuery position and offset method</title>
    </head>
    <body>
        <div class='box'></div>
        <button id='btnOne'>click</button>
    </body>
</html>

CSS ：

.box {
    width: 100px;
    height: 100px;
    background: lightgray;
    margin-bottom: 10px;
}

的jQuery ：

$(function(){
    $('#btnOne').on('click', function(){
        var offset = $('.box').offset();
        var position = $('.box').position();
        console.log(offset, position);
    });
});

这里是jsbin链接 - http://jsbin.com/qibov/1/edit?html,css,js,console,output

Answer 1

来自.offset()的jQuery文档：

.offset（）方法允许我们检索元素相对于文档的当前位置。将此与.position（）进行对比，该位置检索相对于偏移父项的当前位置。将新元素放置在现有元素之上进行全局操作（特别是实现拖放）时，.offset（）更有用。

https://api.jquery.com/offset/

Answer 2

我认为Offset（）测量来自屏幕上/左，Position（）测量来自父母的上/下。（我可能错了）

证明

CSS

.box{ width: 100px; height: 100px; background: lightgray; margin-bottom: 10px; }
#cntnr{position: absolute; top: 100px; left: 100px;}

<强> HTML
<div id="cntnr"> <div class='box'></div> </div> <button id='btnOne'>click</button>

JavaScript

//same

结果

Object { top=100, left=100} Object { top=0, left=0}

将.box放入容器中并不会更改position，但会更改offset;

jQuery偏移和位置方法之间有什么区别吗？

2 个答案: