details元素展开后offsetHeight为0，因open=false时内容被设为display:none或脱离文档流；应监听toggle事件，在open为true后读取scrollHeight，避免直接操作style.display破坏原生行为。
details元素展开后高度拿不到，offsetHeight始终是0？
因为 <details> 默认不渲染 <summary> 后的内容（即使 DOM 存在），浏览器会把 open 属性设为 false 时的 <details> 内容设为 display: none 或脱离文档流，导致 offsetHeight、scrollHeight 都读不到真实内容高度。
用 getComputedStyle + display: block 临时强制计算
核心思路：在不触发重排的前提下，让浏览器“看到”展开后的布局。不能直接改 style.display（会破坏原生 details 行为），得用 getComputedStyle 结合临时样式快照：
- 先确保
<details>已设置open属性（JS 设置或用户已点击） - 用
getComputedStyle(detailsEl).height拿不到真实值，因为高度是 auto；必须读scrollHeight - 但
scrollHeight在open=false时仍为 0 —— 所以得等open变为true后再读 - 监听
toggle事件比轮询更可靠：detailsEl.addEventListener('toggle', () => { if (detailsEl.open) { const h = detailsEl.scrollHeight; console.log('展开后真实高度:', h); } });
动画过渡中要读高度？注意 transitionend 时机
如果给 <details> 加了 height: auto 过渡（比如配合 max-height），scrollHeight 虽然能读到，但直接赋给 style.height 会导致过渡失效。常见错误写法：detailsEl.style.height = detailsEl.scrollHeight + 'px' —— 这会让浏览器跳过初始 auto 状态，过渡从 0→目标值，而不是自然展开。
- 正确做法：先设
height: 0，再用offsetHeight强制重排，再设height: auto或目标值 - 或者更稳妥：用
getComputedStyle(detailsEl).height读当前渲染高度（仅限已展开且有过渡动画进行中） - 若需精确控制，建议放弃原生
details的过渡，用自定义data-open+ CSS 类 +scrollHeight计算来模拟
IE/旧版 Safari 不支持 toggle 事件怎么办？
toggle 是较新标准，Safari 15.4+、Chrome 120+ 支持良好，但 iOS Safari 15.2- 和部分安卓 WebView 仍不触发。此时 fallback 方案只能靠轮询或 MutationObserver 监听 open 属性变化：
立即学习“前端免费学习笔记（深入）”；
- 用
MutationObserver观察attributes，过滤attributeName === 'open' - 避免高频轮询：
setInterval(() => { if (el.hasAttribute('open') !== wasOpen) { /* 处理 */ } }, 50)效率低且不准 - 注意：
el.open属性是布尔值，但 DOM attribute 是存在即 true，所以要用el.hasAttribute('open')判断属性是否存在，而非只看el.getAttribute('open')
细节上最容易被忽略的是：scrollHeight 包含 padding 和 border，但不包含 margin；如果内容里有 margin-top/bottom，它不会计入，得手动加。还有，details 内部如果有 position: absolute 元素，它们不影响 scrollHeight —— 这时候就得自己遍历子元素算。
