html 页面大小改变事件,js检测浏览器窗口大小被改变触发事件的方法

在前端的web页面中浏览器窗口或者框架的大小被改变时会触发js脚本中的 onresize 事件，当然也可以利用 onresize 事件在浏览器窗口或框架的大小发生改时，可以给用户弹出提示或改变背景颜色，布局等等！简单来说在自适应网站的布局中onresize事件被应用的比较多！

js onresize 事件的使用方法

1、浏览器窗口被改变时，输出可视区域的高度与宽度

示例1：window.onresize = resize;

function resize(){

console.log('可视宽'+ document.documentElement.clientWidth);

console.log('可视高' + document.documentElement.clientHeight);

}

示例2：window.onresize = function(){

console.log('可视宽'+ document.documentElement.clientWidth);

console.log('可视高' + document.documentElement.clientHeight);

}

注意：示例1与示例2中的代码是等价的，只是写法不同而已！

2、onresize 事件可以直接绑定到body元素上，可以参考下面的代码！

示例3：html>

PS：测试发现 onresize 事件无法绑定到一些 DIV 元素上，不知大家有没有好的方法！