Wie kann ich mit jQuery auf die Stileigenschaften von CSS-Pseudoelementen (::before, ::after) zugreifen und diese ändern?

Zugriff auf Stileigenschaften von Pseudoelementen in jQuery

Dieser Artikel befasst sich mit dem Problem des Zugriffs auf Stileigenschaften von Pseudoelementen, wie z ::before und ::after mit jQuery.

In CSS werden Pseudoelemente verwendet, um das Erscheinungsbild von Elementen zu ändern, dies ist jedoch nicht möglich direkt mit jQuery-Selektoren gezielt angesprochen. Pseudoelemente fügen von Natur aus Inhalte vor oder nach dem Zielelement ein und können nicht individuell gestaltet werden.

Zum Beispiel, wenn Sie die folgende CSS-Regel haben:

.example::before {
  content: "Added Text";
}

Versuchen Sie, das auszuwählen Pseudoelement mit jQuery, etwa so:

$(".example::before").css("color", "red");

funktioniert nicht. Stattdessen müssen Sie auf das übergeordnete Element abzielen und den :has()-Selektor verwenden, um Elemente auszuwählen, die ein bestimmtes Pseudoelement haben:

$(".example:has(::before)").css("color", "red");

Alternativ können Sie das jQuery.cssRules()-Plugin verwenden, um Direkt auf CSS-Regeln zugreifen und diese ändern:

var rules = jQuery.cssRules();
for (var i = 0; i < rules.length; i++) {
  if (rules[i].selectorText === ".example::before") {
    rules[i].style.color = "red";
  }
}

Es ist jedoch wichtig zu beachten, dass dieser Ansatz durch die Browserunterstützung und -kompatibilität eingeschränkt ist Probleme.

Zusammenfassend lässt sich sagen, dass es zwar nicht möglich ist, Pseudoelemente mit jQuery-Selektoren direkt auszuwählen, es jedoch alternative Methoden gibt, mit denen auf ihre Stileigenschaften zugegriffen und diese geändert werden können.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery auf die Stileigenschaften von CSS-Pseudoelementen (::before, ::after) zugreifen und diese ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!