首页 > 编程笔记 > JavaScript笔记 阅读:231

JS resize事件:窗口重置

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>

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章