如何监听DOM元素resize事件？实现可调整div高度为24倍数

普通<div>元素并没有原生的resize事件，只有window对象支持该事件，这就是你直接给div加onresize属性却毫无反应的核心原因。下面给你提供两种可靠的解决方案：

方案一：使用ResizeObserver（推荐） #

这是现代浏览器原生支持的API，专门用于监听DOM元素的尺寸变化，完美适配你的需求。

修改后的完整代码 #

HTML

<body>
    <div id="resizable-div"></div>
<body>

CSS（必须配置才能让div支持拖拽调整）

#resizable-div {
  resize: vertical; /* 仅允许垂直调整，需要双向可调整就改成both */
  overflow: auto; /* 开启resize必须设置overflow属性 */
  min-height: 48px; /* 限制最小高度，避免调整到过小 */
  border: 1px solid #ccc;
}

JavaScript

const resizeDiv = document.getElementById('resizable-div');

function adjustHeight() {
  const currentHeight = resizeDiv.offsetHeight;
  // 计算最近的能被24整除的高度，可根据需求换成Math.floor或Math.ceil
  const adjustedHeight = Math.round(currentHeight / 24) * 24;
  // 避免不必要的重绘，仅当高度不符合要求时再修改
  if (currentHeight !== adjustedHeight) {
    resizeDiv.style.height = `${adjustedHeight}px`;
  }
}

// 创建监听实例，元素尺寸变化时触发校准函数
const observer = new ResizeObserver(() => {
  adjustHeight();
});

// 开始监听目标div
observer.observe(resizeDiv);

// 页面初始化时执行一次，确保初始高度符合要求
adjustHeight();

关键说明 #

• ResizeObserver能捕获所有导致元素尺寸变化的场景：用户拖拽调整、JS动态修改高度、布局变化影响等。
• 改用offsetHeight获取实际渲染高度，避免了原代码中style.height仅能读取内联样式的局限性。

方案二：针对拖拽调整的监听（仅适用于原生resize场景） #

如果你的div是通过CSSresize属性开启的拖拽调整，也可以通过监听mousemove事件配合状态判断实现，但这种方式不如ResizeObserver健壮：

const resizeDiv = document.getElementById('resizable-div');
let isResizing = false;

resizeDiv.addEventListener('mousedown', (e) => {
  // 只在拖拽右下角调整手柄时触发
  if (e.target === resizeDiv && e.offsetX > resizeDiv.clientWidth - 10 && e.offsetY > resizeDiv.clientHeight - 10) {
    isResizing = true;
  }
});

document.addEventListener('mousemove', () => {
  if (isResizing) {
    adjustHeight();
  }
});

document.addEventListener('mouseup', () => {
  isResizing = false;
});

function adjustHeight() {
  const currentHeight = resizeDiv.offsetHeight;
  const adjustedHeight = Math.round(currentHeight / 24) * 24;
  if (currentHeight !== adjustedHeight) {
    resizeDiv.style.height = `${adjustedHeight}px`;
  }
}

adjustHeight();

这种方式需要手动判断拖拽状态，且无法捕获非拖拽导致的尺寸变化，优先推荐ResizeObserver方案。

内容的提问来源于stack exchange，提问作者pumpchief