📌  相关文章
📜  HTML | DOM onresize 事件(1)

📅  最后修改于: 2023-12-03 15:31:12.411000             🧑  作者: Mango

HTML | DOM onresize 事件

在 HTML 和 DOM 中，onresize 事件会在窗口或框架被调整大小时触发。它的作用是允许我们在页面大小改变时执行特定的 JavaScript 代码。

使用方法

使用 onresize 事件的方法有两种：

1. HTML 中添加 onresize 属性

在 HTML 元素中添加 onresize 属性是最基本的事件绑定方法。可以在需要绑定事件的 HTML 标签中添加 onresize 属性，并将其值设为一个 JavaScript 函数的名称。

<div onresize="myFunction()">内容区域</div>
2. JavaScript 中使用 addEventListener()

使用 JavaScript 中的 addEventListener() 方法也可以为元素添加 resize 事件。

<div id="myDiv">内容区域</div>

document.getElementById("myDiv").addEventListener("resize", myFunction);
代码示例
<!DOCTYPE html>
<html>
    <head>
        <title>onresize 事件示例</title>
    </head>
    <body>
        <div id="myDiv" style="background-color: lightblue; height: 100px; width: 100px;">
            <p>尝试拖动窗口改变大小，直到蓝色区域大小改变</p>
        </div>
        <script>
            function myFunction() {
                var elem = document.getElementById("myDiv");
                elem.innerHTML = "宽度: " + elem.offsetWidth + "，高度: " + elem.offsetHeight;
            }
        </script>
    </body>
</html>

在这个例子中，我为 <div> 元素添加了 onresize 事件。当页面被调整大小时，JavaScript 代码将获取 <div> 元素的宽度和高度，并将它们作为 HTML 内容设置到了 <div> 元素中。

兼容性

onresize 事件被广泛支持，包括主流的现代浏览器和移动端浏览器，但一些较老的浏览器可能不支持。可以使用 JavaScript 浏览器检测来确定是否支持此事件。

总结

在 HTML 和 DOM 中，onresize 事件是一种常见的窗口调整大小时触发事件。它允许我们执行 JavaScript 代码，以响应页面大小的变化。可以在 HTML 代码中使用 onresize 属性或 JavaScript 中的 addEventListener() 方法来绑定此事件。