【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. 在组件挂载后访问 DOM
  useEffect(() => {
    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;