各种获取页面元素宽高与位置的方式

原生JS方式

视口： 指的是浏览器窗口

use offset可以轻松获取元素的宽高，与偏移量，相对于视口

var testElement = document.querySelector('.test'),
    width = testElement.offsetWidth,
    height = testElement.offsetHeight,
    left = testElement.offsetLeft,
    top = testElement.offsetTop;

use getBoundingClientRect

调用该方法，即可返回一个包含left, top, right, bottom, width, height的对象，因此我们可以很轻松的使用该方法得到元素的宽高与位置，该位置数据相对于浏览器视口。

var res = testElement.getBoundingClientRect();
// { top:70, right: 950, bottom: 634, left: 436, width: 514, height: 564 }

由于IE中调用该方法的返回对象没有width， height这两个属性，因此我们获取元素宽高时就需要做一个简单的兼容处理，所有的属性获取如下

var res = testElement.getBoundingClientRect(),
    top = res.top,
    left = res.left,
    right = res.right,
    bottom = res.bottom,
    width = res.width || (right - left),
    height = res.height || (bottom - top);

jquery方式

jquery获取元素的偏移量有两种不同的情况，第一种是相对于document的位置，使用offset()方法

var $testElement = $('.test'),
    left = $testElement.offset().left,
    top = $testElement.offset().top;

第二种是父级元素如果是相对或者绝对定位，获取相对于父级的偏移量，使用position()方法

var $testElement = $('.test'),
    left = $testElement.position().left,
    top = $testElement.position().top;

使用jquery获取元素的宽高，不包括内边距，边框与外边距，方法如下

var $testElement = $('.test'),
    width = $testElement.width(),
    height = $testElement.height();

包括内边距的方法如下

var $testElement = $('.test'),
    width = $testElement.innerWidth(),
    height = $testElement.innerHeight();

包括内边距和边框

var $testElement = $('.test'),
    width = $testElement.outWidth(),
    height = $testElement.outHeight();

包括内边距和边框

var $testElement = $('.test'),
    width = $testElement.outWidth(true),
    height = $testElement.outHeight(true);