Element: pseudo() Methode

.

Die pseudo() Methode der Element Schnittstelle gibt ein CSSPseudoElement Objekt zurück, das das CSS Pseudo-Element des angegebenen Typs darstellt, das dem Element zugeordnet ist.

Sofern der type-Parameter einen gültigen Pseudo-Element-Typ enthält, gibt pseudo() immer eine CSSPseudoElement Instanz zurück, selbst wenn dieses Pseudo-Element nicht am aufrufenden Element generiert wurde.

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()