hi,欢迎访问本站!
当前位置: 首页Web前端正文

js如何实现页面大小被改变时触发事件

墨初 Web前端 712阅读

js脚本中的 onresize 事件是页面的大小被改变时触发的,它可以在页面的高度或宽度被人为的改变时触发,下面是这个事件的具体用法。

js onresize 事件

onresize:浏览器或页面的大小被改变时触发。

语法:

html代码中的用法:

<element onresize="SomeJavaScriptCode">

JavaScript 脚本代码中的用户:

window.onresize=function(){SomeJavaScriptCode};

参数:

参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

js实现浏览器窗口大小被改变时触发事件的方法

例1:

// 73so.com
window.onresize = resize;
function resize(){
    console.log('可视宽'+ document.documentElement.clientWidth);
    console.log('可视高' + document.documentElement.clientHeight);
}

例2:

// 73so.com
window.onresize = function(){
    console.log('可视宽'+ document.documentElement.clientWidth);
    console.log('可视高' + document.documentElement.clientHeight);
}

例3:

<!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>
声明:无特别说明,转载请标明本文来源!
相关推荐