JavaScript implementiert modifizierende Pseudoklassenstile

In Projekten ist es oft notwendig, JavaScript zu verwenden, um den Stil von Elementen (:before,:after) dynamisch zu steuern, aber wir alle wissen, dass JavaScript oder jQuery keine Pseudoklassenselektoren haben. In diesem Artikel stellen wir hauptsächlich die Methode zum Ändern von Pseudoklassenstilen in JavaScript und den Codeimplementierungsprozess vor.

HTML

Hallo, das ist ein schlichtes, altes, traurig aussehendes Absatz-Tag.

CSS

.red::before {
content: 'red';
color: red;
}

Methode 1

Verwenden Sie JavaScript oder jQuery ändert den Klassennamen des

-Elements und ändert den Stil.

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

Methode 2

Fügen Sie neue Stile dynamisch in den vorhandenen ein.

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);

Methode 3

Eine Kopie erstellen Neues Stylesheet und mit JavaScript oder jQuery in den einfügen

// Create a new style tag
var style = document.createElement("style");

// Append the style tag to head
document.head.appendChild(style);

// Grab the stylesheet object
sheet = style.sheet

// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);

jQuery

$(&#39;<style>.red::before{color:green}</style>&#39;).appendTo(&#39;head&#39;);

Methode 4

Verwenden Sie die HTML5-Daten -attribute und verwenden Sie attr() im Attribut, um es dynamisch zu ändern.

<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$(&#39;.red&#39;).attr(&#39;data-attr&#39;, &#39;green&#39;);

Verwandte Empfehlungen:

Pseudoklassenselektor-Zusammenfassung

In PHP Pseudo -Typen und Pseudovariablen

Regular-Parameterfunktionen und Pseudotyp-Parameterfunktionen von PHP-Funktionen

Das obige ist der detaillierte Inhalt vonJavaScript implementiert modifizierende Pseudoklassenstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!