HTMLHRElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLHRElement extends HTMLElement

Beschreibung

Das Interface HTMLHRElement steht für jedes <hr>-Element im DOM. Seit HTML5 bedeutet <hr> keine bloße horizontale Linie mehr, sondern einen thematischen Umbruch zwischen Absätzen, zum Beispiel einen Szenenwechsel in einer Geschichte oder einen Themenwechsel innerhalb eines Abschnitts. Screenreader melden das Element als Trenner (ARIA-Rolle separator).

Über die von HTMLElement, Element, Node und EventTarget geerbten Mitglieder hinaus stellt das Interface nur die Eigenschaften align, color, noShade, size und width bereit. Sie spiegeln die gleichnamigen HTML-Attribute wider, sind aber alle veraltet und nur aus Kompatibilitätsgründen vorhanden.

In der Praxis erzeugt man HTMLHRElement-Instanzen mit document.createElement("hr") und gestaltet sie per CSS (border, height, background-color, margin). Die veralteten Eigenschaften sollte man nur noch lesen, wenn man älteres Markup auswerten oder umwandeln muss.

align (string): Ausrichtung, "left", "center" oder "right". Veraltet.
color (string): Farbe der Linie. Veraltet und nie standardisiert, wird aber von Browsern ausgewertet.
noShade (boolean): Linie ohne 3D-Schattierung. Veraltet.
size (string): Höhe der Linie in Pixeln. Veraltet.
width (string): Breite in Pixeln oder Prozent. Veraltet.

Rückgabewert

Typ

HTMLHRElement

Beschreibung

Instanzen bekommt man z. B. über document.createElement("hr") oder document.querySelector("hr"). Ein eigener Konstruktor lässt sich nicht aufrufen.

Beispiele

Trennlinie erzeugen und per CSS gestalten

const hr = document.createElement("hr");
// Modern: Gestaltung per CSS statt über veraltete Attribute
hr.style.border = "none";
hr.style.height = "2px";
hr.style.backgroundColor = "#ccc";
hr.style.margin = "2rem 0";

document.body.append(hr);
console.log(hr instanceof HTMLHRElement, hr.tagName);

true "HR"

Abschnitte einer Liste mit thematischen Umbrüchen trennen

const kapitel = ["Anreise", "Aufenthalt", "Rückreise"];
const container = document.createElement("article");

kapitel.forEach((titel, i) => {
  if (i > 0) container.append(document.createElement("hr"));
  const p = document.createElement("p");
  p.textContent = titel;
  container.append(p);
});

document.body.append(container);
console.log(container.querySelectorAll("hr").length);

2

Veraltetes Markup auslesen und in CSS umwandeln

// Ausgangs-Markup: <hr width="50%" size="4" noshade align="center">
document.body.insertAdjacentHTML("beforeend",
  '<hr width="50%" size="4" noshade align="center">');

const alt = document.querySelector("hr");
console.log(alt.width, alt.size, alt.noShade, alt.align);

// In zeitgemäßes CSS übertragen und Attribute entfernen
alt.style.width = alt.width;
alt.style.height = `${alt.size}px`;
if (alt.noShade) alt.style.border = "none";
if (alt.noShade) alt.style.backgroundColor = "gray";
if (alt.align === "center") alt.style.marginInline = "auto";
["width", "size", "noshade", "align"].forEach((a) => alt.removeAttribute(a));

"50%" "4" true "center"

// Wichtig · Fallstricke

Die Eigenschaften align, color, noShade, size und width sind veraltet. In neuem Code gehört die Gestaltung ins CSS.
size und width geben Strings zurück, keine Zahlen. Mit ihnen rechnen kann man erst nach parseInt(). Fehlt das Attribut, ist der Wert ein leerer String.
<hr> ist ein leeres Element: Kindknoten oder textContent haben keine sinnvolle Wirkung.
Innerhalb von <select> ist <hr> inzwischen als Trenner erlaubt (Chrome 119+, Safari 17+). Ältere Browser ignorieren es dort.
Rein dekorative Linien setzt man besser über CSS um (z. B. border-top), weil <hr> Screenreadern einen inhaltlichen Umbruch meldet.
Browser-Kompatibilität: Das Interface wird von allen Browsern unterstützt.

Siehe auch

HTMLBRElement HTMLModElement HTMLElement HTMLLIElement HTMLPreElement