DOM元素的各种宽度和高度

DOM元素的各种高度和宽度可以用js直接获取，也可以用JQuery获取，但它们的函数很多，容易搞混

博主在做一个滚动加载更多列表的时候，也曾因为获取高度的方法使用不当，造成部分手机不兼容，根据自己在网上查的资料和经验，这里进行详细说明：

Javascript:

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

 

JQuery:

1.height()：相当于js属性height

2.innerHeight()：相当于js属性clientHeight

3.outerHeight()，相当于js属性offsetWidth；带参数则包含margin

4.scrollTop()，相当于js属性scrollTop

滚动的高度，不包含当前窗口可见高度

注意：$(document).height()和$(window).height()是不一样的，前者是整个文档的高度，后者是当前窗口的可见高度

因此，要计算是否滚动到底部，就要这样判断

if ($(document).height() - $(this).scrollTop() == $(this).height())