原生js中獲取offset系列值 和 jquery中獲取 offset（）的區別

一 ：關於offset系列的值

http://blog.csdn.net/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 的鍵值對，並且僅僅是相對於文檔邊界 獲取或者設置的，無論父元素是否定位