工作中有一個很常見的需求，hover或者click某元素後，在該元素旁邊出現彈框，主要就是獲取該元素的位置座標以及元素所佔區塊的大小。最近工作中就遇到了，發現js和jquery的實現方法有很大的區別，這裡總結一下，備忘。

1. 獲取元素的相對位置資訊

   • 原生js方法

         var x = obj.offsetLeft,
             y = obj.offsetTop;

   • jquery方法

         var _offset = $obj.offset(),
             x = _offset.left,
             y = _offset.top;

     這兩個方法看起來相似，其實有很大的不同.
   1. 原生js獲取位置的參考資訊是：父輩元素中的定位元素，即非static(預設值)的元素。而juqery方法始終返回相對於文件的偏移。
   2. 當父元素有滾動條的時候，兩者的情況也是不同的。js會把滾動的距離也算在相應的偏移量中，而jquery的值不受滾動條的影響。
      綜合以上兩點不同可以看出：當父元素不會出現滾動條且父輩元素的定位屬性都統一(即參考點要相同)的時候，可以用原生方法獲取位置資訊，彈框用相對定位(相對於上面提到的參考點).jquery則相對簡單很多，因為他的計算始終相對於文件，所以彈框用fixed定位即可。
2. 獲取元素所佔區塊的大小

   • 原生js方法

         // 方法1
         var _width =
      
      obj.style.width,
             _height = obj.style.height;
         // 方法2
         var _width = obj.offsetWidth,
             _height = obj.offsetHeight;

     其中方法一基本可以忽略，因為他只能獲取到內斂樣式。當然可以代替他的方法也有，情參考通過原生js獲取元素的樣式

   • jquery方法

         // 獲取高度的方法類似
         var _width1 = $obj.width(),
             _width2 = $obj.innerWidth(),
             _width3 =
      
      $obj.outerWidth(),
             _width4 = $obj.outerWidth(true);

     有多重方法可以獲取元素的大小，下面分別介紹異同。由盒模型可以知道，元素所佔空間大小 = width + padding + border + margin; 所以可以得到以下對應關係：

         _width1 = width;
         _width2 = width + padding;
         _width3 = width + padding + border;
         _width4 = width + padding + border + marign;

     原生js方法2獲取的寬度_width相當於jquery的方放獲取到的_width3;
     ***

根據以上獲取到的資訊就可以定位彈框的位置了：

    $popup.css({ // 此處把彈框定位在元素的右側居中位置
        left: x + _width,
        top: y + _height/2
    })