Wie ändere ich die CSS-Breite-Eigenschaft von :before Selector mithilfe von jQuery dynamisch?

Dynamisches Ändern der CSS-Breite-Eigenschaft von :before Selector mit jQuery

Während es nicht möglich ist, die width-Eigenschaft von :before-CSS-Selektoren direkt zu ändern Bei Verwendung von jQuery gibt es eine Problemumgehung. Durch dynamisches Hinzufügen eines neuen Stilelements zum Kopf des Dokuments können Sie den gewünschten Effekt erzielen. So geht's:

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

Dieser Code fügt ein neues Stilelement an den Kopf des Dokuments an. Die CSS-Regeln in diesem Element zielen nur auf den :before-Selektor innerhalb der .column-Klasse ab, setzen die Eigenschaft width auf 800 Pixel und überschreiben alle vorhandenen Breiteneinstellungen.

Beispiel und Demo

Beachten Sie die folgenden CSS-Regeln:

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

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

Um die Breiteneigenschaft von dynamisch zu ändern :before für .column-Klassenelemente fügen Sie den folgenden JavaScript-Code hinzu:

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

Dadurch wird sichergestellt, dass nur die :before-Selektoren innerhalb von .column-Elementen in ihrer Breite geändert werden. Eine Live-Demo dieser Lösung ist [hier] verfügbar (DEMO_URL).

Alternative Plugins

Während die obige Methode eine unkomplizierte Lösung ist, können Sie auch externe Plugins erkunden die direkten Zugriff auf Pseudoklassenregeln ermöglichen. Es wird jedoch empfohlen, solche Plugins zu recherchieren und zu testen, bevor Sie sie in einer Live-Umgebung verwenden.

Das obige ist der detaillierte Inhalt vonWie ändere ich die CSS-Breite-Eigenschaft von :before Selector mithilfe von jQuery dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!