利用 onresize 事件，实现页面（元素）大小随浏览器窗口变化

爱划水de鲸鱼哥
261 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

在日常开发中，可能会遇见页面（元素）大小随浏览器窗口变化的需求。本文就记录了如何利用 onresize 事件，实现这样效果。

思路

利用onresize 事件会在窗口大小发生变化时触发的特点，结合使用函数将浏览器窗口的宽高赋值给目标元素，即可实现页面（或页面元素）大小随浏览器窗口变化。

onresize 事件

在 JavaScript 中 ，resize 事件是在浏览器窗口被重置时触发的 ， 如当用户调整 窗口大小， 或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。利用该事件可以跟踪窗口大小的变化以便动态调整页面元素的显示大小。

支持该事件的 HTML 标签：

<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>,<dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>,<legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>,<table>, <textarea>, <tt>, <ul>, <var>

ps:在 IE 和 Opera 浏览器中，只要窗口的边框被改变一个像素，onresize事件就会被触发；而在 Mozilla Firefox 等其他浏览器中，只在停止对窗口的大小改变时才触发 onresize 事件。

clientWidth、clientHeight

clientWidth（clientHeight） 属性表示元素的内部宽（高）度，单位像素。 该属性包括内边距，但不包括滚动条、边框和外边距；

获取浏览器窗口文档显示区域的宽度:

    document.documentElement.clientWidth

获取浏览器窗口文档显示区域的高度:

    document.documentElement.clientHeight

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用 onresize 事件，实现页面大小随浏览器窗口变化</title>
</head>
<!-- onresize 事件当浏览器被重置大小时执行 -->
<body onresize="resize()" style="margin: 0px; padding: 0px; overflow: hidden; background: #000">
    <!-- 容器 -->
    <div id="box"></div>
</body>
</html>
<Script>
    function resize() {
        var box = document.getElementById("box");
        box.style.width = document.documentElement.clientWidth + 'px';
        box.style.height = document.documentElement.clientHeight + 'px';
    }
</Script>

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！

avatar
文章
阅读
粉丝