Jquery的各种高度

$(document)和$(window)

①$(doucment).height():整个网页的高度

②$(window).height():浏览器可视窗口的高度

③$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)

例如:当网页滚动条拉到最低端时,

$(document).height() == $(window).height() + $(window).scrollTop()注意,是拉到最低端!

怎么获取整个网页的高度?为什么不使用其他方式来获取?

$("body").height():如果body有边框,获取的高度会比整个网页的高度小。

$("html").height():这个可能会存在一些兼容性的问题。

那为什么不使用 innerHeight()与outerHeight()?

    这个是因为这两个样式主要是用来获取标签的高度。innerHeight:高度+补白。outerHeight:高度+补白+边框(如果有参数,还需要再加上边距)

以下给出相应的实例与解析

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin

猜你喜欢

转载自blog.csdn.net/qq_34559257/article/details/80306413