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

原文地址:https://www.cnblogs.com/wanliyuan/p/3877991.html