offsetHeight 和 clientHeight 对下拉列表无效，因 select 是替换元素，其展开面板由系统/浏览器原生渲染且不在 DOM 中，JS 无法直接获取；仅能估算或改用自定义组件。
为什么 offsetHeight 和 clientHeight 对下拉列表无效
因为 <select> 元素在多数浏览器中是“替换元素”（replaced element），其渲染由操作系统控件或浏览器原生 UI 管理，DOM 属性如 offsetHeight 返回的是折叠状态下的高度（通常 20–40px），而非展开后下拉面板的实际高度。这个高度根本不在当前 DOM 树里，JavaScript 无法直接访问。
用 getBoundingClientRect() 捕捉展开瞬间的尺寸（仅限 Chrome/Firefox 实验性支持）
部分现代浏览器（Chrome 115+、Firefox 119+）在 select 展开时会短暂触发 focus 或 click 后的 layout，此时可尝试立即读取下拉面板——但注意：它没有 DOM 节点，无法用 querySelector 定位；只能靠坐标推算。
- 监听
focus事件，在setTimeout(..., 0)中调用getBoundingClientRect()获取select本身位置 - 结合
window.getComputedStyle(document.body).getPropertyValue('font-size')估算每项高度（常见 24–32px） - 用
select.length× 单项高度 + 边框/内边距 ≈ 下拉面板总高（误差 ±10px） - 该方法不跨平台，Safari 完全不暴露任何展开态信息，且受
size属性或 CSSappearance干扰
真正可靠的做法：用自定义下拉组件替代原生 <select>
如果你必须精确控制、测量或动画下拉区域，原生 select 就是技术债源头。所有稳定方案都绕不开重写：
- 用
<div role="combobox">+<ul role="listbox">模拟，所有子项为真实 DOM 节点 - 展开后调用
dropdownElement.getBoundingClientRect().height可得精确值 - 支持
resizeObserver监听内容变化（比如异步加载选项后高度变动） - 注意 ARIA 属性必须完整（
aria-expanded、aria-activedescendant），否则影响可访问性
调试时别被 DevTools 的“伪元素”误导
Chrome DevTools 有时会在 <select> 下显示 ::-webkit-inner-spin-button 或类似伪元素，但这只是样式占位符，不是真实下拉面板。你看到的“下拉框”是独立于页面渲染进程的 UI 层，脚本无权读取其尺寸。试图用 getComputedStyle(select, '::after') 或遍历 shadowRoot 都会返回 null 或空对象。
立即学习“前端免费学习笔记（深入）”；
真正需要高度的场景，几乎总是意味着你需要交互控制——那就别和原生 select 死磕了。
