监听浏览器窗口的变化

最新推荐文章于 2024-09-19 11:17:39 发布

weixin_30896763

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/king-ying/p/5936401.html

版权

用jQuery监听浏览器窗口的变化

$(window).resize(function(){
    $(document.body).height();   // 浏览器窗口文档body的高度
    $(document.body).width();   // 浏览器窗口文档body的宽度
    $(document.body).outerHeight();  //浏览器窗口文档的总高度，也就是盒子模型，包括height、padding、border和margin
    $(document.body).outerWidth();  //浏览器窗口文档的总宽度，也就是盒子模型，包括height、padding、border和margin
    $(document).height();  // 浏览器窗口文档的高度
    $(document).width();  // 浏览器窗口文档的宽度
    $(window).height();   //浏览器窗口可视区域的高度
    $(window).width();   //浏览器窗口可视区域的宽度
})

用js获取浏览器的各个区域的大小--常用的

document.body.clientWidth;  // 网页可见区域宽
document.body.clientHeight;  //网页可见区域高
document.body.offsetWidth;  //网页可见区域高,包括边线的宽 
document.body.offsetHeight; //网页可见区域高,包括边线的高
以上不考虑浏览器兼容性，都可以用：
window.innerHeight/innerWidth来获取
document.body.scrollTop;  // 鼠标滚动可见区域里丢失的网页上半部分
document.body.scrollLeft;  //鼠标滚动可见区域里丢失的网页左半部分

转载于:https://www.cnblogs.com/king-ying/p/5936401.html