Wie jQuery CSS-Pseudoelementattribute_jquery ändert

CSS-Pseudoelemente (Pseudoelemente) sind keine DOM-Elemente, daher können Sie sie nicht direkt auswählen.

Angenommen, es gibt den folgenden HTML-Code:

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

und CSS-Code:

.techbrood:before {
width: 0;
}

Jetzt möchten Sie das width-Attribut von techbrood:before im Klickereignis eines Elements dynamisch auf 100 % setzen,

Es gibt zwei Methoden, eine besteht darin, einen neuen Stil hinzuzufügen:

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(Beachten Sie, dass sich diese Methode auf alle Elemente mit der Klasse techbrood auswirkt)

Eine andere Methode besteht darin, dem Element eine neue Klasse hinzuzufügen und die Attribute der neuen Klasse festzulegen, um den Effekt einer Änderung der Attribute des Pseudoelements zu erzielen:

.techbrood.change:before{
width: 100%;
}

jQuery-Code:

$('#td_pseudo').addClass("change");