JS获取元素的宽高及位置，视口的宽高的几种方法

第一次使用CSDN，记录下遇到的几种JS获取DOM元素的宽高的方法。

1.不同视口的获取方法

1.1获取包括滚动条的视口的大小

var width = window.innerWidth
var height  = window.innerHeight

1.2获取视口大小(内容区域大小,包括侧边栏，窗口镶边，和调整窗口大小的边距)

var width = window.outerWidth
var height  = window.outerHeight

1.3获取屏幕理想视口大小，固定值，屏幕分辨率大小

var width = window.screen.width
var height  = window.screen.height

1.4获取浏览器可用窗口的大小(包含内边距，但不包含垂直滚动条，边框和外边距)

var width = window.screen.availWidth
var height  = window.screen.availHeight

如图演示

1.5包括内边距、滚动条、边框和外边距

var width = document.documentElement.offsetWidth,
var height = document.documentElement.offsetHeight;

1.6在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度和高度

var width = document.documentElement.scrollWidth,
var height = document.documentElement.scrollHeight;

1.6包含元素的内边距，但不包括边框、外边距或者垂直滚动条

var width = document.documentElement.clientWidth,
var height = document.documentElement.clientHeight;

 
 

2.获取DOM元素的宽高

2.1内高度、内宽度： 内边距 + 内容框

var width = element.clientWidth
var height = element.clientHeight

2.2外高度，外宽度： 边框 + 内边距 + 内容框

var width = element.offsetWidth
var height = element.offsetHeight

2.3上边框、左边框

element.clientTop
element.clientLeft

2.4元素的大小及其相对于视口的位置

element.getBoundingClientRect()
x\y  //元素的左上角和父元素左上角的距离
width/height  //边框 + 内边距 + 内容框
top  //元素的上边界和父元素上边界的距离
left  //元素的左边界和父元素左边界的距离
right  //元素的右边界和父元素的左边界的距离
bottom  //元素的下边界和父元素上边界的距离

2.5上边偏移量，左边的偏移量

element.offsetTop
element.offsetLest