<div>元素是 HTML 中最重要的一個元素之一，它可以用來創建網頁中的塊級元素。使用<div>元素可以將一組相關的元素組織起來，并且可以通過 CSS 來對其進行布局和樣式設置。除了常見的布局和樣式使用外，<div>元素還可以使用 onresize 事件實現一些動態效果。
onresize 事件是在元素的尺寸發生變化時觸發的事件。通過與<div>元素結合使用，我們可以實現一些在瀏覽器窗口縮放或者元素尺寸變化時觸發的操作。下面我們將通過幾個代碼案例來詳細解釋使用<div>元素的 onresize 事件。
代碼案例1：
在這個案例中，我們創建了一個紅色的<div>元素，并且定義了其寬度和高度為200像素。當瀏覽器窗口縮放或者<div>元素尺寸變化時，會觸發 resizeBox 函數。該函數通過獲取<div>元素的 offsetWidth 和 offsetHeight 屬性來獲取當前<div>元素的寬度和高度，并將其顯示在
在這個案例中，我們使用 window 對象的 innerWidth 和 innerHeight 屬性來獲取當前瀏覽器窗口的寬度和高度。當瀏覽器窗口大小發生變化時，會觸發 showWindowSize 函數，并將當前窗口的寬度和高度顯示在
onresize 事件是在元素的尺寸發生變化時觸發的事件。通過與<div>元素結合使用，我們可以實現一些在瀏覽器窗口縮放或者元素尺寸變化時觸發的操作。下面我們將通過幾個代碼案例來詳細解釋使用<div>元素的 onresize 事件。
代碼案例1：
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script>
function resizeBox() {
var box = document.getElementById("box");
var width = box.offsetWidth;
var height = box.offsetHeight;
document.getElementById("size").innerHTML = "Width: " + width + "px, Height: " + height + "px";
}
</script>
</head>
<body onresize="resizeBox()">
<div id="box"></div>
<p id="size"></p>
</body>
</html>在這個案例中，我們創建了一個紅色的<div>元素，并且定義了其寬度和高度為200像素。當瀏覽器窗口縮放或者<div>元素尺寸變化時，會觸發 resizeBox 函數。該函數通過獲取<div>元素的 offsetWidth 和 offsetHeight 屬性來獲取當前<div>元素的寬度和高度，并將其顯示在
元素中。
代碼案例2：
<!DOCTYPE html>
<html>
<head>
<script>
function showWindowSize() {
var width = window.innerWidth;
var height = window.innerHeight;
document.getElementById("size").innerHTML = "Window Width: " + width + "px, Window Height: " + height + "px";
}
</script>
</head>
<body onresize="showWindowSize()">
<p id="size"></p>
</body>
</html>在這個案例中，我們使用 window 對象的 innerWidth 和 innerHeight 屬性來獲取當前瀏覽器窗口的寬度和高度。當瀏覽器窗口大小發生變化時，會觸發 showWindowSize 函數，并將當前窗口的寬度和高度顯示在
元素中。
通過上述兩個代碼案例，我們可以看到使用<div>元素的 onresize 事件可以實現一些在瀏覽器窗口縮放或者元素尺寸變化時觸發的動態效果。通過獲取元素的尺寸信息或者當前窗口的尺寸信息，我們可以根據實際需求來動態調整頁面布局或者展示相關信息。這對于響應式設計和用戶體驗的提升都具有重要意義。因此，在開發網頁時，我們可以充分利用<div>元素的 onresize 事件，為用戶提供更好的交互體驗。
上一篇div 中script
下一篇div 內 換行