获取宽高位置的方法

获取页面宽高，滚动的位置等的方法

浏览器可视窗口宽高（像素），如存在滚动条则包括

1 2	window.innerWidth window.innerHeight

整个浏览器窗口的宽高（像素），包括侧边栏、窗口镶边和窗口调正边框

1 2	window.outerWidth window.outerHeight

元素的内部宽高（像素）。包括padding，不包括滚动条、margin

1 2	element.clientWidth element.clientHeight

元素的内部宽高 + padding + border + 滚动条

1
2
3

// 返回
element.offsetWidth
element.offsetHeight

元素的X和Y坐标

1 2	element.offsetLeft element.offsetTop

页面滚动的距离

1 2	pageXOffset pageYOffset

使用滚动条的情况下为了适应视口中所用内容所需的最小宽高

1
2
3

// 包含元素的内边距，但不包括边框，外边距或滚动条。还可以包括伪元素的宽高。
element.scrollWidth
element.scrollHeight

元素的滚动条的位置

1 2	element.scrollLeft element.scrollTop

ps：如果想让一个元素的溢出部分随着页面滚动，可设置element.scrollTop = element.scrollHeight

获取元素上下左右边距

使用getClientRects()或getBoundingClientRect()

var element=document.getElementById(‘box’); // 获取元素
box.getBoundingClientRect().top // 元素上边距离页面上边的距离
box.getBoundingClientRect().right // 元素右边距离页面左边的距离
box.getBoundingClientRect().bottom // 元素下边距离页面上边的距离
box.getBoundingClientRect().left// 元素左边距离页面左边的距离