Heim  >  Artikel  >  Web-Frontend  >  So ändern Sie Pseudoklassenstile mit JavaScript

So ändern Sie Pseudoklassenstile mit JavaScript

小云云
小云云Original
2017-11-29 09:42:163348Durchsuche

Wir haben alle von CSS-Pseudoklassen gehört, aber nicht, dass JavaScript auch Pseudoklassen hat. In Projekten müssen wir häufig JavaScript verwenden, um die Stile von Pseudoelementen (:before,:after) dynamisch zu steuern Alle wissen, dass es in JavaScript oder jQuery keine Pseudoklassenselektoren gibt. Hier finden Sie eine Zusammenfassung einiger gängiger Methoden.

HTML

<p class="red">Hi, this is a plain-old, sad-looking paragraph 
tag.</p>
CSS
.red::before {
content: &#39;red&#39;;
color: red;
}

Methode 1

Verwenden Sie JavaScript oder jQuery, um den Klassennamen des e388a4556c0f65e1904146cc1a846bee-Elements zu ändern Ändern Sie den Stil.

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

Methode 2

Fügen Sie dynamisch einen neuen Stil in den vorhandenen 2758825b01e050f9490aeef3e7e80a42 ein.

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

Methode 3

Erstellen Sie ein neues Stylesheet und fügen Sie es mit JavaScript oder jQuery in den 93f0f5c25f18dab9d176bd4f6de5d30e ein

// 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(&#39;.red::before&#39;,&#39;color: green&#39;);
sheet.insertRule(&#39;.red::before { color: green }&#39;, 0);

jQuery

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

Methode 4

Verwenden Sie das HTML5-Datenattribut und verwenden Sie attr(), um es im Attribut 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;);

Die oben genannten vier Methoden haben wir für Sie zusammengestellt, wie Sie mit JavaScript Pseudoklassenstile ändern können.

Verwandte Empfehlungen:

Beispielanalyse, wie CSS3-Pseudoklassen 3D-Schaltflächen erstellen

Detaillierte Erläuterung von Anwendungsbeispielen für Fokus-Pseudoklassen Klassen in CSS

Pseudoklassenselektor-Zusammenfassung

Das obige ist der detaillierte Inhalt vonSo ändern Sie Pseudoklassenstile mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn