area元素无宽高属性，需解析coords坐标并按shape类型计算：rect取坐标差，circle为直径，poly需计算包围盒；注意coords基于原图尺寸，响应式下需结合缩放比换算。
area 元素本身没有宽高属性，不能直接获取
HTML 的 标签只是定义图像映射（）中的一个可点击区域，它不渲染为实际 DOM 盒子，也没有 offsetWidth、getBoundingClientRect() 等返回有效尺寸的属性。直接对 调用这些方法会得到 0 或 {width: 0, height: 0}。
必须通过 coords 属性解析坐标再计算
的形状和范围由 coords 属性决定，其值是逗号分隔的像素坐标，具体格式取决于 shape（如 "rect"、"circle"、"poly"）。你需要手动解析并按规则推算宽高：
-
shape="rect"：coords="x1,y1,x2,y2"→ 宽 =|x2 - x1|，高 =|y2 - y1| -
shape="circle"：coords="cx,cy,r"→ 宽 = 高 =2 * r -
shape="poly"：无统一宽高；若需包围盒（bounding box），需遍历所有点取minX/maxX/minY/maxY
示例（rect 区域）：
<map name="mymap"><area shape="rect" coords="10,20,110,70" href="#" id="a1"></map>
JS 获取宽高：
const area = document.getElementById('a1');
const [x1, y1, x2, y2] = area.coords.split(',').map(Number);
const width = Math.abs(x2 - x1);
const height = Math.abs(y2 - y1); // → width=100, height=50
注意 coords 坐标系依赖于关联的 ![]()
尺寸
的 coords 是相对于原始图像（natural size）的像素值，但若 width: 100%; height: auto），实际显示尺寸已变 —— 此时你算出的宽高仍是原始图上的像素值，不是屏幕上的 CSS 像素。
- 要得到屏幕上的视觉宽高，需乘以缩放比例：
scaleX = img.offsetWidth / img.naturalWidth - 若图像被拉伸变形（宽高比不一致），
scaleX和scaleY不同，需分别应用 - 响应式页面中，务必监听
resize或使用ResizeObserver重算，因为缩放比会动态变化
area 事件对象里没有宽高信息，别指望 event.target.getBoundingClientRect()
点击 触发的事件，event.target 是 元素，调用 getBoundingClientRect() 返回的是空矩形（width: 0, height: 0）。真正能拿到位置的是 event.clientX/event.clientY，但它们只给点击点，不描述区域范围。
如果你需要“判断鼠标是否在某 area 内”，得自己写坐标判定逻辑（比如对 rect 做边界比较，对 poly 做点在多边形内算法），而不是依赖 DOM 尺寸 API。
实际中容易忽略的是：coords 解析后得到的数值默认是整数像素，但原始图可能有小数坐标（比如导出工具生成），建议用 parseFloat 而非 parseInt；另外，coords 字符串可能含空格或换行，解析前最好 .trim().replace(/\s+/g, '')。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
