Heim >Web-Frontend >CSS-Tutorial >Wie kann ich mit jQuery auf die Stileigenschaften von CSS-Pseudoelementen zugreifen?

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

Barbara Streisand
Barbara StreisandOriginal
2024-12-12 19:40:11564Durchsuche

How Can I Access the Style Properties of CSS Pseudo-elements with jQuery?

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!

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