获取元素的offsetTop,offsetLeft等相关属性

转自:https://segmentfault.com/a/1190000002879406,有增加内容。

一、注意是JQuery对象还是JS原生对象

//偏移left和top
$(obj).offset().left;  //jqery

obj.offsetLeft //元素相对于父元素的left ，是元素左上角到父元素的距离（从元素左border算起）

obj.offsetTop //元素相对于父元素的top

// width和height

$(obj).width() //jquery方式获取元素的宽度，不包括滚动条与工具条

$(obj).height() //jquery方式获取元素的高度，不包括滚动条与工具条

obj.clientWidth //获取元素的宽度，不包括边框，边距或滚动条 （等于width + padding）

obj.clientHeight //获取元素的高度，不包括边框，边距或滚动条（等于height + padding）

obj.offsetWidth //元素的宽度（width + padding + border + 滚动条）

obj.offsetHeight //元素的高度（width + padding + border + 滚动条）

window.innerWidth //获取屏幕可视区域的宽度，包括边框，边距或滚动条，不包括工具条

window.innerHeight //获取屏幕可视区域的高度，包括边框，边距或滚动条，不包括工具条

window.outerWidth //获取屏幕可视区域的宽度，包括边框，边距或滚动条以及工具条

window.outerHeight //获取屏幕可视区域的高度，包括边框，边距或滚动条以及工具条

document.documentElement.clientWidth  || document.body.clientWidth  // 获取屏幕可视区域的宽度

document.body.clientWidth：document.body.clientWidth获得的也是可视区域的宽度，但是document.body.clientHeight获得的是body内容的高度，如果内容只有200px，那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高，需要样式设置，如下：

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

最关键的是：body的height:100%影响document.body.clientHeight的值。body的margin:0,padding:0影响document.body.clientWidth的值。

二、区别

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border + 滚动条

offsetHeight = width + padding + border + 滚动条

对象.offsetParent //获取父元素 body的父元素是null

//获取元素的纵坐标（相对于窗口）
function getTop(e){
    var offset=e.offsetTop;
    if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
    return offset;
}

//获取元素的横坐标（相对于窗口）
function getLeft(e){
    var offset=e.offsetLeft;
    if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
    return offset;
}

三：兼容性

1.window innerWidth 和 innerHeight 属性与outerWidth和outerHeight属性IE8以及以下不支持。

2.测试浏览器IE，火狐，谷歌，360浏览器，Safari都支持document.documentElement.clientWidth与document.documentElement.clientHeight。

四：结论

获取屏幕的可视区域的宽高可使用jquery的方式获得，也可以使用原生js获得，即：

document.documentElement.clientWidth与document.documentElement.clientHeight