size, distance of HTMLElement

html-element-size-and-distance.js

let domRect = elem.getBoundingClientRect();
/*
- top:    元素*上边界* 与 页面可视区域*上边界* 的距离；
- bottom: 元素*下边界* 与 页面可视区域*上边界* 的距离；
- right:  元素*右边界* 与 页面可视区域*左边界* 的距离；
- left:   元素*左边界* 与 页面可视区域*左边界* 的距离；

// IE9+
- width, 元素的宽；
- height, 元素的高；

// IE/Edge not support
- x, 元素左上角与页面可视区域的横向距离；
- y, 元素左上角与页面可视区域的竖向距离；
*/

// IE9+
window.innerWidth;   // 页面可视区域的宽度
window.innerHeight;  // 页面可视区域的高度

// IE6+
elem.clientWidth;  // 元素可视区域的宽度
elem.clientHeight; // 元素可视区域的高度