HTMLAreaElement.hash — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAreaElement.hash

Beschreibung

Die Eigenschaft hash von HTMLAreaElement gibt einen String zurück, der aus einem # und dem Fragmentbezeichner der URL im href-Attribut besteht, z. B. "#kontakt". Hat die URL kein Fragment oder nur ein leeres (#), ist der Rückgabewert der leere String "".

Sie gehört zu den URL-Zerlegungseigenschaften (wie protocol, host, pathname, search), die <area> genauso wie <a> und URL anbieten. So kann man bei klickbaren Bereichen einer Image-Map das Sprungziel auslesen oder verändern, ohne den ganzen href von Hand zu zerlegen.

Beim Setzen wird das href-Attribut aktualisiert. Ein führendes # ist optional, es wird automatisch ergänzt. Zeichen, die in Fragmenten nicht erlaubt sind (etwa Leerzeichen), werden prozentkodiert. Der Getter liefert den kodierten Wert, deshalb muss man für die Anzeige oder den Vergleich mit IDs decodeURIComponent() verwenden.

Parameter

Name	Typ	Default	Beschreibung
$wert	string		Nur beim Setzen: neuer Fragmentbezeichner, mit oder ohne führendes `#`. Ein leerer String entfernt das Fragment.

Rückgabewert

Typ

string

Beschreibung

Das Fragment einschließlich # (prozentkodiert) oder "", wenn kein bzw. ein leeres Fragment vorhanden ist.

Beispiele

Fragment eines Image-Map-Bereichs auslesen

// <map name="plan"><area id="raum" shape="rect" coords="0,0,50,50" href="/gebaeude.html#raum-101" alt="Raum 101"></map>
const area = document.getElementById('raum');
console.log(area.hash);
console.log(area.hash.slice(1)); // ohne #

#raum-101 raum-101

Fragment setzen – # wird ergänzt

const area = document.querySelector('area');
area.href = 'https://example.com/seite.html';
area.hash = 'abschnitt 2';
console.log(area.hash);
console.log(area.href);

#abschnitt%202 https://example.com/seite.html#abschnitt%202

Bereiche mit Ankern auf derselben Seite sanft scrollen lassen

document.querySelectorAll('map area').forEach((area) => {
  area.addEventListener('click', (event) => {
    // Nur Anker auf derselben Seite abfangen
    if (!area.hash || area.pathname !== location.pathname) return;
    const ziel = document.getElementById(decodeURIComponent(area.hash.slice(1)));
    if (ziel) {
      event.preventDefault();
      ziel.scrollIntoView({ behavior: 'smooth' });
      history.pushState(null, '', area.hash);
    }
  });
});

// Wichtig · Fallstricke

Bei einem leeren Fragment (href="seite.html#") liefert hash ebenfalls "", obwohl ein # im href steht.
Der Wert ist prozentkodiert. Für getElementById() vorher mit decodeURIComponent() dekodieren, weil sonst IDs mit Sonderzeichen oder Umlauten nicht gefunden werden.
Fehlt das href-Attribut oder lässt es sich nicht als URL auswerten, gibt der Getter "" zurück und der Setter bewirkt nichts.
Das Setzen von hash ändert nur das Attribut und löst keine Navigation und kein hashchange-Ereignis aus. Beides passiert erst, wenn der Bereich angeklickt wird.
Wird von allen modernen Browsern unterstützt. In sehr alten Browsern war das Kodierungsverhalten uneinheitlich.

Siehe auch

URL.hash Location.hash HTMLAreaElement.host HTMLAreaElement.alt HTMLAreaElement.href