HTMLMapElement：areas 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLMapElement 接口的 areas 只读属性返回关联 <map> 元素的 <area> 元素集合。

值

一个包含 HTMLAreaElement 元素的 HTMLCollection 对象。

示例

html
<map id="image-map">
  <area shape="circle" coords="50,50,35" alt="左箭头" />
  <area shape="circle" coords="150,50,35" alt="右箭头" />
</map>
<img usemap="#image-map" src="left-right-arrow.png" alt="左右箭头图片" />
<output></output>
js
const mapElement = document.getElementById("image-map");
const outputElement = document.querySelector("output");

for (const area of mapElement.areas) {
  area.addEventListener("click", (event) => {
    outputElement.textContent = `你点击了${area.alt}区域。\n\n`;
  });
}

结果

规范

Specification
HTML Standard
# dom-map-areas-dev

浏览器兼容性

BCD tables only load in the browser

参见