js如何实现页面大小被改变时触发事件
墨初 Web前端 1133阅读
js脚本中的 onresize 事件是页面的大小被改变时触发的，它可以在页面的高度或宽度被人为的改变时触发，下面是这个事件的具体用法。
js onresize 事件
onresize：浏览器或页面的大小被改变时触发。
语法：
html代码中的用法：
Markup
<element onresize="SomeJavaScriptCode">JavaScript 脚本代码中的用户:
JavaScript
window.onresize=function(){SomeJavaScriptCode};参数：
| 参数 | 描述 |
|---|---|
| SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
js实现浏览器窗口大小被改变时触发事件的方法
例1：
JavaScript
// 73so.com
window.onresize = resize;
function resize(){
console.log('可视宽'+ document.documentElement.clientWidth);
console.log('可视高' + document.documentElement.clientHeight);
}例2：
JavaScript
// 73so.com
window.onresize = function(){
console.log('可视宽'+ document.documentElement.clientWidth);
console.log('可视高' + document.documentElement.clientHeight);
}例3：
Markup
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--注意 body元素中的代码-->
<body onresize="alert('浏览器的大小被改变了！');">
</body>
</html>手机预览赞赏支持
"作者已被打赏56次"