js或者jquery如何实时获取浏览器的高度和宽度的?

发布网友发布时间：2022-04-25 22:10

共4个回答

懂视网时间：2022-05-14 19:27

JavaScript和jQuery在前端开发中运用广泛，这篇文章就和大家讲讲JQuery,javascript获得网页的高度和宽度的方法，有需要的朋友可以参考一下，希望可以帮助到爱学习的你！

javascript

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

jquery

获取浏览器显示区域的高度： (window).height();获取浏览器显示区域的宽度：(window).height();获取浏览器显示区域的宽度：(window).width();
获取页面的文档高度：(document).height();获取页面的文档宽度：(document).height();获取页面的文档宽度：(document).width();
获取滚动条到顶部的垂直高度：(document).scrollTop();获取滚动条到左边的垂直宽度：(document).scrollTop();获取滚动条到左边的垂直宽度：(document).scrollLeft();
计算元素位置和偏移量
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo　　指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll　　是否把滚动条计算在内，默认TRUE
options.padding　　是否把padding计算在内，默认false
options.margin 　　是否把margin计算在内，默认true
options.border　　是否把边框计算在内，默认true

热心网友时间：2022-05-14 16:35

jquery

$(function(){
/*调整窗口自动调整宽度*/
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
console.info("窗口高度：" + h + "; 窗口宽度：" + w);
});
});

热心网友时间：2022-05-14 17:53

document.body.clientWidth --> BODY对象宽度
document.body.clientHeight -->
BODY对象高度
document.documentElement.clientWidth --> 可见区域宽度

document.documentElement.clientHeight --> 可见区域高度

热心网友时间：2022-05-14 19:28

$(window).resize(function() {
alert($(window).height());
alert($(window).width());
});