Element: pseudo()-Methode

Syntax

pseudo(type)

Parameter

type

Ein String, der den Typ des Pseudo-Elements angibt, für das eine Repräsentation zurückgegeben werden soll. Gültige Werte sind:

• ::after
• ::before
• ::marker

Rückgabewert

Eine CSSPseudoElement-Objektinstanz oder null, wenn type nicht einem gültigen Pseudo-Element-Typ entspricht.

Beispiele

Grundlegende Verwendung

In diesem Beispiel demonstrieren wir die grundlegende Verwendung der pseudo()-Methode.

HTML

Wir fügen ein <p>-Element mit Text und ein <output>-Element ein, um Ausgaben von JavaScript zu protokollieren.

<p>New York's hottest club is...</p>
<output></output>

CSS

Wir geben dem <p>-Element's ::after Pseudo-Element etwas content und wenden einige grundlegende Stile auf beide an.

body {
  width: 80%;
  margin: 0 auto;
}

p {
  background-color: violet;
  padding: 20px;
}

p::after {
  content: "Crease";
  background-color: cadetblue;
  padding: 20px;
}

JavaScript

In unserem Skript holen wir Referenzen zu unseren <p> und <output>-Elementen und rufen ein CSSPseudoElement auf, das das <p>-Element's ::after Pseudo-Element über die pseudo()-Methode darstellt. Wir protokollieren dann einige Details des Pseudo-Elements in unser <output>-Element. Wir fügen auch eine grundlegende Fehlerbehandlung über eine try...catch-Struktur hinzu, um eine Fehlermeldung in nicht unterstützenden Browsern auszugeben.

const pElem = document.querySelector("p");
const output = document.querySelector("output");

try {
  const pseudoElem = pElem.pseudo("::after");
  output.textContent = `${pseudoElem.type} pseudo-element. Parent: <${pseudoElem.parent.tagName.toLowerCase()}>`;
} catch (e) {
  output.textContent = `Your browser doesn't support CSSPseudoElement and/or the pseudo() method: ${e}`;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSSPseudoElement.pseudo()