Wie kann ich mit jQuery auf die Stileigenschaften von CSS-Pseudoelementen zugreifen?

Zugriff auf Stileigenschaften von Pseudoelementen mit jQuery

Angesichts der Einschränkungen beim Durchlaufen von CSS-Regeln untersucht dieser Artikel die Verwendung von jQuery-Selektoren zum Auffinden Elemente mit spezifischen Auswirkungen, die durch Pseudoelementregeln verursacht werden.

Betrachten Sie beispielsweise ein Element:

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
}

das selektiv geändert werden kann:

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

Um Pseudoelemente mit ihren Standardhintergrundpositionen auszuwählen, funktioniert die folgende Selektorsyntax nicht:

$(".commentarea .author:before")

In ähnlicher Weise geben Versuche, .siblings() zu verwenden, um Elemente mit bestimmten Hintergrundbildern zu finden, leere Ergebnisse zurück.

Die Der Kern des Problems liegt in der Natur der Pseudoelemente. Sie haben keine unabhängigen Selektoren und modifizieren stattdessen die umgebenden Elemente. Mit anderen Worten: :before und :after werden nicht ausgewählt; sie ändern sich.

Zum Beispiel im HTML:

<span>

und CSS:

.a .b:before {
    content: "|Inserted using :before|";
}

der Text „|Eingefügt mit :before|“ wird vor dem inneren Span-Element eingefügt, da Klasse b ein Nachkomme der Klasse a ist. Dies zeigt, dass Pseudoelemente keine eigenen Selektoren haben, sich aber auf ihre übergeordneten Elemente auswirken.

Daher ist es nicht möglich, Pseudoelemente direkt mit der standardmäßigen jQuery-Selektorsyntax auszuwählen. Eine mögliche Lösung besteht darin, ein jQuery-Plugin wie jQueryRule (http://flesler.blogspot.com/2007/11/jqueryrule.html) zu verwenden, um die ursprüngliche CSS-Regel zu extrahieren.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery auf die Stileigenschaften von CSS-Pseudoelementen zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!