常用高度——获取浏览器窗口的高度（jquery和js）

一：针对浏览器的常用高度

jquery的用法：

<script type="text/javascript">
$(document).ready(function()
{
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度    （这儿也是包括滚动条的）
alert($(document.body).height());//浏览器时下窗口文档body的高度   （这儿也是包括滚动条的）
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin --不出意料的是 = $(document).height
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
}
)
</script>

js的用法：

document.body.scrollHeight  整个网页的高度（类似$(document).height() and  $(document.body).outerHeight(true)） 

document.documentElement.clientWidth  在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小，（等同于 $(window).height()）

document.body.offsetHeight  这个不是那么确定，觉得跟 $(document.body).height() 比较类似

二、针对选择器/元素的常用高度

offsetTop -------- 当前对象到其上级层顶部的距离，同样的用法是js里面的 selector.offsetTop 等同于 jquery中的$(selector).offset().top

offsetLeft -------- 当前对象到其上级层左边的距离，同样的用法是js里面的 selector.offsetLeft 等同于 jquery中的$(selector).offset().left

上面两个跟我们平时用的style.top、style.left的区别是：

1、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

2、offsetTop 只读，而 style.top 可读写。

offsetTop与style.top，offsetLeft与style.left，offsetWidth与style.width，offsetHeight与style.height都是同样的道理，区别如上。并且offsetWidth与style.width，offsetHeight与style.height还有一个区别，就是如果对象的宽度设定值为百分比宽度，则无论页面变大还是变小，style.width都会返回此百分比，而offsetWidth则返回在不同页面中的对象的宽度值而不是百分比。

offsetWidth，offsetHeight 分别指的是当前对象的宽度和高度。

三、滚动高度

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离( 即是在出现了纵向滚动条的情况下，滚动条拉动的距离.)

alert($(document.body).scrollTop());
alert(document.body.scrollTop);

一般要做到兼容，会选择这么写：var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;