Map 區域 集合
示例
查詢特定影像對映中有多少個 <area> 元素
var x = document.getElementById("planetmap").areas.length;
x 的結果將是
3
自己動手試一試 »
更多“自己嘗試”的例子見下文。
描述
areas 集合返回影像對映中所有 <area> 元素的集合。
注意： 集合中的元素按它們在原始碼中出現的順序排序。
提示：要返回所有指定了 href 屬性的 <area> 元素的集合，請使用 links 集合。
瀏覽器支援
| 集合 | |||||
|---|---|---|---|---|---|
| areas | 是 | 是 | 是 | 是 | 是 |
語法
mapObject.areas
屬性
| 屬性 | 描述 |
|---|---|
| length | 返回集合中 <area> 元素的數量。 注意： 此屬性為只讀 |
方法
| 方法 | 描述 |
|---|---|
| [index] | 返回集合中具有指定索引（從 0 開始）的 <area> 元素。 注意：如果索引號超出範圍，則返回 null。 |
| item(index) | 返回集合中具有指定索引（從 0 開始）的 <area> 元素。 注意：如果索引號超出範圍，則返回 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.tw/jsref/sun.htm
自己動手試一試 »
示例
item(index)
獲取影像對映中第一個 <area> 元素的 URL
var x = document.getElementById("planetmap").areas.item(0).href;
x 的結果將是
https://w3schools.tw/jsref/sun.htm
自己動手試一試 »
示例
namedItem(id)
獲取影像對映中 id="myArea" 的 <area> 元素的 URL
var x = document.getElementById("planetmap").areas.namedItem("myArea").href;
x 的結果將是
https://w3schools.tw/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 物件
