window.onresize使用实例

最新推荐文章于 2022-07-04 22:50:49 发布

原创最新推荐文章于 2022-07-04 22:50:49 发布 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

Javascript基础专栏收录该内容

6 篇文章

订阅专栏

本文提供了一个简单的HTML页面示例，演示如何实时获取并显示浏览器窗口的高度和宽度。通过JavaScript监听窗口大小变化，并更新显示的尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <title>请调整浏览器窗口</title>
    <meta charset="UTF-8">
</head>
<body>
    <h2 align="center">请调整浏览器窗口大小</h2>
    <hr>
    <form action="#" method="get" name="form1" id="form1">
        <!-- 显示浏览器窗口的实际尺寸 -->
        浏览器窗口的实际高度: <input  id="height" type="text" name="availHeight" size="4"><br> 
        浏览器窗口的实际宽度: <input  id="width"  type="text" name="availWidth"  size="4"><br>
    </form>

    <script>
        document.getElementById('height').value = window.outerHeight + "px";
        document.getElementById('width').value = window.outerWidth + "px";

        window.onresize=function(){
            document.getElementById('height').value = window.outerHeight + "px";
            document.getElementById('width').value = window.outerWidth + "px";
        };
    </script>
</body>
</html>