【JS】获取元素宽高（例如div）
文章目录
- 基础用法
基础用法
高度类型选择（宽度同理）：
| 属性 | 描述 |
|---|---|
| offsetHeight | 包含边框+内边距+内容 |
| clientHeight | 包含内边距+内容（不包含边框） |
| scrollHeight | 包含滚动内容的全高（含隐藏部分） |
JS可使用getElementById等选择器替换useRef：
const targetDiv = document.getElementById('myDiv');
const offsetHeight = targetDiv.offsetHeight
import React, { useRef, useEffect, useState } from 'react';function HeightComponent() {// 1. 创建 ref 对象const divRef = useRef(null);const [height, setHeight] = useState(0);// 3. 在组件挂载后访问 DOMuseEffect(() => {if (divRef.current) {// 4. 获取高度const divHeight = divRef.current.offsetHeight;setHeight(divHeight);console.log('Div 高度:', divHeight);}}, []); // 空依赖数组确保只在挂载时运行// 响应尺寸变化（可选）useEffect(() => {const handleResize = () => {if (divRef.current) {setHeight(divRef.current.offsetHeight);}};window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, []);return (<div>{/* 2. 绑定 ref 到目标 div */}<div ref={divRef} style={{ padding: '20px', border: '1px solid red' }}>这是一个需要测量高度的 div<br />内容高度会变化...</div><p>Div 高度: {height}px</p></div>);
}export default HeightComponent;