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 # dom-map-areas-dev |
浏览器兼容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
areas |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.