hosteons中文网

在 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>