Element: pseudo() Methode

Syntax

pseudo(type)

Parameter

type

Ein String, der den Typ des Pseudo-Elements repräsentiert, von dem eine Repräsentation zurückgegeben werden soll. Gültige Werte sind:

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

Rückgabewert

Ein CSSPseudoElement Objekt, oder null, wenn type nicht gleich einem gültigen Pseudo-Element-Typ ist.

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 zum Protokollieren von Ausgaben aus JavaScript ein.

<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 uns Referenzen zu unseren <p> und <output> Elementen und erhalten ein CSSPseudoElement, das das ::after Pseudo-Element des <p> Elements über die pseudo() Methode darstellt. Wir protokollieren dann einige Details des Pseudo-Elements in unser <output> Element. Wir beinhalten auch eine rudimentäre Fehlerbehandlung durch eine try...catch Struktur, 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()