onresize 事件动态获取窗口大小

最新推荐文章于 2022-05-08 20:29:37 发布

lx_9119

最新推荐文章于 2022-05-08 20:29:37 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lx_9119/article/details/111335972

本文介绍JavaScript中的resize事件，该事件在浏览器窗口尺寸改变时触发，可用于动态调整页面元素尺寸。示例代码展示如何维持红色盒子与窗口尺寸的比例。

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

在 JavaScript 中，resize 事件是在浏览器窗口被重置时触发的，如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。利用该事件可以跟踪窗口大小的变化以便动态调整页面元素的显示大小。
示例
下面的示例能够根据跟踪窗口大小变化及时调整页面内红色盒子的大小，使其始终保持与窗口固定比例的大小显示。

<div id="box"></div>
<script>
    var box = document.getElementById("box");  //获取盒子的指针引用
    box.style.position = "absolute";  //绝对定位
    box.style.backgroundColor = "red";  //背景色
    box.style.width = w() * 0.8 + "px";  //设置盒子宽度为窗口宽度的0.8倍
    box.style.height = h() * 0.8 + "px";  //设置盒子高度为窗口高度的0.8倍
    window.onresize = function () {  //注册事件处理函数，动态调整盒子大小
        box.style.width = w() * 0.8 + "px";
        box.style.height = h() * 0.8 + "px";
    }
    function w () {  //获取窗口宽度
        if (window.innerWidth) {  //兼容DOM
            return window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))  //兼容IE
            return document.body.clientWidth;
    }
    function h () {  //获取窗口高度
        if (window.innerHeight) {  //兼容DOM
            return window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))  //兼容IE
            return document.body.clientHeight;
    }
</script>