Map areas 集合
示例
找出特定图像地图中有多少个 <area> 元素
var x = document.getElementById("planetmap").areas.length;
x 的结果将是
3
自己试试 »
更多“自己试试”示例如下。
描述
areas 集合返回图像地图中所有 <area> 元素的集合。
注意：集合中的元素按其在源代码中的出现顺序排序。
提示：要返回所有具有指定 href 属性的 <area> 元素的集合，请使用 links 集合。
浏览器支持
| 集合 | |||||
|---|---|---|---|---|---|
| areas | 是 | 是 | 是 | 是 | 是 |
语法
mapObject.areas
属性
| 属性 | 描述 |
|---|---|
| length | 返回集合中 <area> 元素的数量。 注意：此属性为只读。 |
方法
| 方法 | 描述 |
|---|---|
| [index] | 返回集合中指定索引的 <area> 元素（从 0 开始）。 注意：如果索引号超出范围，则返回 null。 |
| item(index) | 返回集合中指定索引的 <area> 元素（从 0 开始）。 注意：如果索引号超出范围，则返回 null。 |
| namedItem(id) | 返回集合中具有指定 id 的 <area> 元素。 注意：如果 id 不存在，则返回 null。 |
技术细节
| DOM 版本 | 核心级别 2 文档对象 |
|---|---|
| 返回值 | HTMLCollection 对象，表示文档中图像地图中的所有 <area> 元素。集合中的元素按其在源代码中的出现顺序排序。 |
更多示例
示例
[index]
获取图像地图中第一个 <area> 元素的 URL
var x = document.getElementById("planetmap").areas[0].href;
x 的结果将是
https://w3schools.org.cn/jsref/sun.htm
自己试试 »
示例
item(index)
获取图像地图中第一个 <area> 元素的 URL
var x = document.getElementById("planetmap").areas.item(0).href;
x 的结果将是
https://w3schools.org.cn/jsref/sun.htm
自己试试 »
示例
namedItem(id)
获取图像地图中 id 为“myArea”的 <area> 元素的 URL
var x = document.getElementById("planetmap").areas.namedItem("myArea").href;
x 的结果将是
https://w3schools.org.cn/jsref/mercur.htm
自己试试 »
示例
遍历图像地图中的所有 <area> 元素并输出每个区域的形状
var x = document.getElementById("planetmap");
var txt = "";
var i;
for (i = 0; i < x.areas.length; i++) {
txt = txt + x.areas[i].shape + "<br>";
}
txt 的结果将是
rect
circle
circle
自己试试 »
❮ Map 对象
