📅 最后修改于: 2023-12-03 14:40:45.714000 🧑 作者: Mango
在前端开发中，经常需要对页面中的元素进行动态调整大小，以便更好地适配不同的屏幕尺寸和设备。而 div 元素是我们常用的容器元素，因此我们需要了解如何使用 div 元素进行调整大小。
div 元素是 HTML 中的一个块级元素，可以作为容器来包含其他 HTML 元素。我们可以使用 CSS 样式来对 div 元素进行布局和样式上的修改。
例如，下面的代码定义了一个带有背景色和边框的 div 容器：
<div style="background-color: #f1f1f1; border: 1px solid #ccc; padding: 10px;">
<p>这是一个 div 容器</p>
</div>
为了实现 div 元素的调整大小，我们需要使用一些事件来监听容器的变化。目前，我们可以使用以下事件来监听容器大小的变化：
resize 事件是一个 Window 对象的事件，每当窗口被调整大小后会被触发。但是，resize 事件只能监听浏览器窗口的大小变化，不能监听具体元素的大小变化。
window.onresize = function() {
console.log("窗口被调整大小了！");
}
MutationObserver 接口可以用来监听节点树的变化，当被监听的节点的子节点、属性发生变化时，就会触发回调函数。我们可以使用这个接口来监听 div 元素的大小变化。
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log("div 元素的大小变化了！");
});
});
const targetNode = document.querySelector('.div-container');
const config = { attributes: true, childList: true, subtree: true };
observer.observe(targetNode, config);
下面的代码演示了如何使用 div 元素的调整大小事件实现一个自适应高度的 div 容器，以便匹配不同的屏幕尺寸和设备。
<!DOCTYPE html>
<html>
<head>
<title>Div 自适应高度</title>
<meta charset="UTF-8">
<style>
.div-container {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="div-container" id="div-container" style="background-color: #f1f1f1;">
<p>这是一个自适应高度的 div 容器</p>
</div>
<script>
const divContainer = document.getElementById('div-container');
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
divContainer.style.height = 'auto';
divContainer.style.height = divContainer.scrollHeight + 'px';
});
});
const config = { attributes: true, childList: true, subtree: true };
observer.observe(divContainer, config);
</script>
</body>
</html>
div 元素是前端开发中常用的容器元素，JavaScript 提供了一些调整大小事件，可以监听 div 元素的大小变化。我们可以利用这些事件来实现自适应大小的容器，适应不同的屏幕尺寸和设备。