获取元素位置信息和所占空间大小(via:js&jquery)

获取元素的相对位置信息

原生js方法

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

jquery方法

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

这两个方法看起来相似，其实有很大的不同.

原生js获取位置的参考信息是：父辈元素中的定位元素，即非static(默认值)的元素。而juqery方法始终返回相对于文档的偏移。

当父元素有滚动条的时候，两者的情况也是不同的。js会把滚动的距离也算在相应的偏移量中，而jquery的值不受滚动条的影响。

综合以上两点不同可以看出：当父元素不会出现滚动条且父辈元素的定位属性都统一(即参考点要相同)的时候，可以用原生方法获取位置信息，弹框用相对定位(相对于上面提到的参考点).jquery则相对简单很多，因为他的计算始终相对于文档，所以弹框用fixed定位即可。

获取元素所占区块的大小

原生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
})