Map areas 集合
实例
找出特定图像映射中有多少<area> 元素:
var x = document.getElementById("planetmap").areas.length;
x 的结果将是:
3亲自试一试 »页面下方有更多实例。
定义和用法
area 集合返回图像映射中所有<area> 元素的集合。
注释: 集合中的元素按其在源代码中的显示进行排序。
提示:要返回所有指定了 href 属性的<area> 元素的集合,请使用 links 集合。
浏览器支持
| 集合 | |||||
|---|---|---|---|---|---|
| areas | Yes | Yes | Yes | Yes | Yes |
语法
mapObject.areas
属性
| 属性 | 描述 |
|---|---|
| length | 返回集合中<area> 元素的数量。 注释: 此属性是只读的 |
方法
| 方法 | 描述 |
|---|---|
| [index] | 返回集合中指定索引(从 0 开始)对应的<area> 元素 。 注释: 如果索引号超出范围,则返回 null |
| item(index) | 返回集合中指定索引(从 0 开始)对应的<area> 元素 。 注释: 如果索引号超出范围,则返回 null |
| namedItem(id) | 返回集合中指定索引 id 对应的<area> 元素。 注释: 如果 id 不存在,则返回 null |
技术细节
| DOM 版本: | Core Level 2 Document Object |
|---|---|
| 返回值: | 一个 HTMLCollection 对象,代表所有的<area> 文档中图像映射中的元素。 集合中的元素按照它们在源代码中出现的方式排序 |
更多实例
实例
[index]
获取图像映射中第一个<area> 元素的 URL:
var x = document.getElementById("planetmap").areas[0].href;
x 的结果将是:
https://www.freew3c.com/demo/sun.htm亲自试一试 »实例
item(index)
获取图像映射中第一个<area> 元素的 URL:
var x = document.getElementById("planetmap").areas.item(0).href;
x 的结果将是:
https://www.freew3c.com/demo/sun.htm亲自试一试 »实例
namedItem(id)
在图像映射中使用 id="myArea" 获取<area> 元素的 URL:
var x = document.getElementById("planetmap").areas.namedItem("myArea").href;
x 的结果将是:
https://www.freew3c.com/demo/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亲自试一试 »