1. Grund:
Dieser Artikel entstand aus einer Frage in der OSC-Community darüber, wie man mit jq Pseudoelemente erhält. Mein erster Gedanke ist, dass die leistungsstarke CSS-Abfrage in der Lage sein sollte, Pseudoelemente abzurufen.
Die CSS-Abfrage kann dies jedoch tatsächlich nicht. Das heißt, wir können das :before-Pseudoelement nicht über $(":before"), $(dom).find(":before") oder document.querySelector(":before") erhalten.
Dazu musste ich Pseudoelemente (Pseudoelemente) neu verstehen. Warum können wir mit JS nicht direkt Pseudoelemente abrufen?
Zum Beispiel werden die Pseudoelemente ::before und ::after verwendet, um beim CSS-Rendering Inhalte in den Kopf oder das Ende eines Elements einzufügen. Sie sind nicht an das Dokument gebunden und wirken sich nicht auf das Dokument selbst aus wirken sich nur auf den endgültigen Stil aus. Diese hinzugefügten Inhalte werden nicht im DOM angezeigt, sondern nur in der CSS-Rendering-Ebene hinzugefügt.
Tatsächlich können Pseudoelemente vom Browser gerendert werden, sie sind jedoch selbst keine DOM-Elemente. Es existiert nicht im Dokument, daher kann JS es nicht direkt bearbeiten. Die Selektoren von jQuery basieren alle auf DOM-Elementen und können daher Pseudoelemente nicht direkt bedienen.
Wie manipuliert man den Stil von Pseudoelementen?
Aus diesem Grund habe ich beschlossen, die Methoden zur Steuerung von Pseudoelementen in JS zusammenzufassen, um sie in Zukunft leichter nachschlagen zu können.
2. Was sind die Pseudoelemente:
Lassen Sie uns zunächst kurz darüber sprechen, was Pseudoelemente sind. Es gibt sechs Pseudoelemente, nämlich ::after, ::before, ::first-line, ::first-letter, ::selection, ::backdrop.
Die am häufigsten verwendeten Pseudoelemente in großen Webseiten sind ::after und ::before.
Informationen zur Semantik dieser Pseudoelemente finden Sie in meinem anderen Artikel „Zusammenfassung der CSS-Pseudoelementauswahl“.
In CSS3 wird empfohlen, dass Pseudoelemente die Syntax mit zwei Doppelpunkten (::) anstelle eines Doppelpunkts (:) verwenden, um Pseudoklassen und Pseudoelemente zu unterscheiden. Die meisten Browser unterstützen beide Präsentationssyntaxen. Nur ::selection kann immer mit zwei Doppelpunkten (::) beginnen. Da IE8 nur die Syntax mit einem Doppelpunkt unterstützt, ist die Verwendung eines einzelnen Doppelpunkts am sichersten, wenn Sie mit IE8 kompatibel sein möchten.
3. Ermitteln Sie den Attributwert des Pseudoelements:
Um den Attributwert eines Pseudoelements zu erhalten, können Sie die Methode window.getComputedStyle() verwenden, um das CSS-Stildeklarationsobjekt des Pseudoelements abzurufen. Verwenden Sie dann die Methode getPropertyValue oder verwenden Sie direkt den Schlüsselwertzugriff, um den entsprechenden Eigenschaftswert abzurufen.
Syntax: window.getComputedStyle(element[, pseudoElement])
Parameter sind wie folgt:
Element (Objekt): das DOM-Element, in dem sich das Pseudoelement befindet;
// CSS代码
#myId:before {
content: "hello world!";
display: block;
width: 100px;
height: 100px;
background: red;
}
// HTML代码
<div id="myId"></div>
// JS代码
var myIdElement = document.getElementById("myId");
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
console.log(beforeStyle); // [CSSStyleDeclaration Object]
console.log(beforeStyle.width); // 100px
console.log(beforeStyle.getPropertyValue("width")); // 100px
console.log(beforeStyle.content); // "hello world!"1. Sowohl getPropertyValue() als auch der direkte Schlüsselwertzugriff können auf das CSSStyleDeclaration-Objekt zugreifen. Die Unterschiede zwischen ihnen sind:
Wenn Sie für Float-Attribute den Schlüsselwertzugriff verwenden, können Sie getComputedStyle(element, null).float nicht direkt verwenden, aber cssFloat und styleFloat; Wenn Sie den Schlüsselwertzugriff direkt verwenden, muss der Attributschlüssel in Kamel-Schreibweise geschrieben werden, z. B.: style.backgroundColor; Die getPropertyValue()-Methode muss nicht in Camel-Case geschrieben werden (Camel-Case wird nicht unterstützt), zum Beispiel: style.getPropertyValue("border-top-color"); Die getPropertyValue()-Methode wird in IE9+ und anderen modernen Browsern in IE6~8 unterstützt, Sie können stattdessen die getAttribute()-Methode verwenden;
2. Das Standard-Pseudoelement ist „display: inline“. Wenn das Anzeigeattribut nicht definiert ist, ist der schließlich erhaltene Breitenwert immer noch „auto“, auch wenn der Breitenattributwert in CSS explizit auf eine feste Größe wie „100 Pixel“ festgelegt ist. Dies liegt daran, dass die Breite und Höhe von Inline-Elementen nicht angepasst werden kann. Die Lösung besteht darin, das Anzeigeattribut des Pseudoelements in „block“, „inline-block“ oder anders zu ändern.
4. Ändern Sie den Stil des Pseudoelements:
Methode 1. Ändern Sie die Klasse, um den Attributwert des Pseudoelements zu ändern: Geben Sie mir ein Beispiel:
Methode 2. Verwenden Sie insertRule von CSSStyleSheet, um den Stil von Pseudoelementen zu ändern:
// CSS代码
.red::before {
content: "red";
color: red;
}
.green::before {
content: "green";
color: green;
}
// HTML代码
<div class="red">内容内容内容内容</div>
// jQuery代码
$(".red").removeClass('red').addClass('green');
Methode 3. Fügen Sie den internen Stil von