Wie kann ich die Breite eines CSS-Selektors „:before' mit jQuery dynamisch anpassen?

Dynamische Breitenanpassung von CSS :before-Selektoren mit jQuery

Ziel:Ändern der Breiteneigenschaft von Elementen, die mit dem :before-CSS-Selektor versehen sind, insbesondere, wenn es einer bestimmten Klasse folgt Name.

Szenario: Betrachten Sie das folgende CSS:

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

Aufgabe: Ändern Sie die width-Eigenschaft des :before-Selektors, der mit dem verknüpft ist .column-Klasse mit jQuery, ohne Auswirkungen auf Elemente ohne :before Regel.

Lösung:

Wie in der gegebenen Antwort erwähnt, unterstützt jQuery nativ keine direkte Änderung von Pseudoklassenregeln. Sie können diese Einschränkung jedoch umgehen, indem Sie dynamisch ein neues Stilelement an den Kopf des Dokuments anhängen:

$('head').append('<style>.column:before {width: 800px !important;}</style>');

Dadurch wird dem :before-Selektor innerhalb der .column-Klasse eine feste Breite von 800 Pixeln zugewiesen. Beachten Sie, dass die !important-Deklaration alle vorhandenen Stile überschreibt.

Alternativ können Sie ein Plugin verwenden, das speziell zum Ändern von CSS-Pseudoklassenregeln entwickelt wurde. Während eine spezifische Plugin-Empfehlung nicht verfügbar ist, sollte eine Websuche nach „jQuery-Pseudoklassenmanipulation“ geeignete Ergebnisse liefern.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite eines CSS-Selektors „:before' mit jQuery dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!