获取浏览器窗口尺寸及监听浏览器变化

发布时间 2023-03-31 16:50:20作者: bwteacher

原JS获取:
窗口可视高度:window.innerWidth
窗口可视宽度:window.innerHeight
窗口文档高度:document.body.clientWidth
窗口文档宽度: document.body.clientHeight
JQuery获取:
窗口可视高度:$(window).height()
窗口文档高度:$(window).height()
窗口body高度:$(document.body).height()
窗口文档总高度: $(document.body).outerHeight(true) 包括border padding margin
窗口可视宽度:$(window).width()
窗口文档宽度:$(window).width()
窗口body宽度:$(document.body).width()
窗口文档总宽度: $(document.body).outerWidth(true) 包括border padding margin

滚动条到顶端的垂直高度:$(document).scrollTop()
滚动条到左边的垂直宽度:$(document).scrollLeft()

监听窗口变化:
原JS
window.onresize=function(){......}

window.addEventListener('resize',function(){....})
jQuery
$(function(
$(window).resize(function(){...}) ));