Kolekcja obszarów mapy

definicja i użycie

definiowane area kolekcja zwraca wszystkie elementu <area> kolekcja.

Komentarz:Elementy w zbiorze są sortowane według kolejności ich wystąpienia w kodzie źródłowym.

Wskazówka:aby zwrócić wszystkie określone href elementu <area> kolekcja, użyj links kolekcja

Przykład

Przykład 1

Sprawdza, ile elementów <area> znajduje się w określonej mapie obrazu:

var x = document.getElementById("planetmap").areas.length;

Spróbuj sam

Wynik x to:

3

Poniżej znajduje się więcej przykładów TIY.

Gramatyka

mapObject.areas

Atrybut

Wartość Opis
length

Zwraca liczbę elementów <area> w zbiorze.

Komentarz:Ta właściwość jest jedynie do odczytu

Metoda

Metoda Opis
[index]

Zwraca element <area> z określonym indeksem w zbiorze (zaczynając od 0).

Komentarz:Zwraca null, jeśli numer indeksu jest poza zakresem.

item(index)

Zwraca element <area> z określonym indeksem w zbiorze (zaczynając od 0).

Komentarz:Zwraca null, jeśli numer indeksu jest poza zakresem.

namedItem(id)

Zwraca element <area> z określonym id w zbiorze.

Komentarz:Zwraca null, jeśli id nie istnieje.

Szczegóły techniczne

Wersja DOM: Core Level 2 Document Object
Zwrócona wartość:

Obiekt HTMLCollection, reprezentujący wszystkie elementy <area> w mapie obrazu dokumentu.

Elementy w zbiorze są sortowane według kolejności ich wystąpienia w kodzie źródłowym.

Wsparcie przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Obsługa Obsługa Obsługa Obsługa Obsługa

Więcej przykładów

Przykład 2: [index]

Pobiera URL pierwszego elementu <area> w mapie obrazu:

var x = document.getElementById("planetmap").areas[0].href;

Spróbuj sam

Wynik x będzie:

https://www.codew3c.com/jsref/sun.html

Przykład 3: item(index)

Pobiera URL pierwszego elementu <area> w mapie obrazu:

var x = document.getElementById("planetmap").areas.item(0).href;

Spróbuj sam

Wynik x będzie:

https://www.codew3c.com/jsref/sun.html

Przykład 4: namedItem(id)

Pobiera URL elementu <area> z id="myArea" w mapie obrazu:

var x = document.getElementById("planetmap").areas.namedItem("myArea").href;

Spróbuj sam

Wynik x będzie:

https://www.codew3c.com/jsref/mercur.html

Przykład 5

Przechodzi przez wszystkie elementy <area> w mapie obrazu i wyświetla kształt każdej obszaru:

var x = document.getElementById("planetmap");
var txt = "";
var i;
for (i = 0; i < x.areas.length; i++) {
  txt = txt + x.areas[i].shape + "<br>";
}

Spróbuj sam

Wynik x będzie:

rect
circle
circle