【jQuery】中DOM 高度问题

一个 dom 元素占据的高度分为四种：content-height, padding, border, margin。

jQuery 提供了4种对应的获取方式：height(), innerHeight(), outerHeight(), outerHeight(true)。

依次对应并且依次包含，比如 height 获取到 content-height, 那 innerHeight 获取到 content-height + padding。

所以如果要获取一个 dom 元素真正在网页中占据的高度应该使用 outerHeight(true)。对于宽度是一致的。

另外的有一个，对于 inline-block 和 block 元素， content-height 有点不一致，需要根据 style.boxSizing (content-box 和 border-box) 不同而有不同的结果。不过这个 jQuery 都做了封装。当然 boxSizing 不止这两种，这都是因为规范不同导致的。

jQuery height相关方法

1. alert($(window).height()); //浏览器时下窗口可视区域高度   
2. alert($(document).height()); //浏览器时下窗口文档的高度   
3. alert($(document.body).height());//浏览器时下窗口文档body的高度   
4. alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin   
5. alert($(window).width()); //浏览器时下窗口可视区域宽度   
6. alert($(document).width());//浏览器时下窗口文档对于象宽度   
7. alert($(document.body).width());//浏览器时下窗口文档body的高度   
8. alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin   
9. alert($(document/window).scrollTop()); /滚动条滚动后相对于浏览器的高度
10. alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度