::before-Selector mit Javascript entfernen oder content löschen?

J

jemand anders

Erfahrenes Mitglied
Hallo,

wie kann man den ::before-Selector mit Javascript löschen oder alternativ den content ändern? Jemand eine Idee?

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
    p {
        padding:5px;
        border:1px solid #999;
    }
    p::before {
        content: 'before: '
    }
    </style>
</head>
<body>
<p>Wie kann man den ::before-Selector mit Javascript löschen oder alternativ den content ändern?</p>
</body>
</html>

Vielen Dank.

Freundl. Grüße
 
Hallo.

Das ist eine interessante Frage. In JavaScript kommt man nicht so einfach an die Pseudoelemente ran, daher muss man hier ein wenig um die Ecke denken.

Mir fallen da einige Möglichkeiten ein, wie man dein Problem lösen kann.
Ich denke es kommt darauf an, wie dynamisch du es haben möchtest.

- Wenn es nur um das Löschen geht (oder man möchte feste Werte einsetzen), würde ich vorschlagen deinem Paragraph eine Klasse zu geben, die den wert der content Property kontrolliert. So in etwa:
CSS: 
p::before { content: '' }
p.with-content::before { content: 'before: ' }
Da ein Leerstring als Wert das Pseudoelement nicht anzeigt musst du nur die Klasse .with-content entfernen, um das before nicht an zu zeigen.

- Wenn es dynamischer sein soll, würde vorschlagen mit CSS Variablen zu arbeiten.
So zum Beispiel:
CSS: 
p::before { content: var(--content, ''); }
Und dann in JS über:
Javascript: 
pElement.style.setProperty('--content', `"[ hier den gewünschten Wert einfügen ]"`)
Den Wert setzen.

Hoffe das hilft dir.
Andreas
 
@jemand anders
Du kannst, wenn Du eine Klasse benutzt, natürlich auch das Pseudoelement ganz weglassen wenn diese nicht gesetzt ist:
Code: 
p {
    /* dein CSS */
}

p.has-before::before {
    content: 'dein content';
}
Löscht Du dann die Klasse mit JS wird das Pseudoelement verschwinden.
Code: 
document.querySelector('p').classList.remove('has-before');
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück