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

6f23bfb838f442699a99d538155cf763Hallo, das ist ein schlichtes, altes, traurig aussehendes Absatz-Tag.94b3e26ee717c64999d7867364b1b4a3

CSS

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

Methode 1

Verwenden Sie JavaScript oder jQuery ändert den Klassennamen des e388a4556c0f65e1904146cc1a846bee-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 2758825b01e050f9490aeef3e7e80a42 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 93f0f5c25f18dab9d176bd4f6de5d30e 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!