常用高度——获取浏览器窗口的高度(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;