Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erklärung, wie man mit JavaScript Pseudoelement-Attribute (Pseudo-Element) erhält

coldplay.xixi
Freigeben: 2020-06-20 16:55:50
nach vorne
3429 Leute haben es durchsucht

Ausführliche Erklärung, wie man mit JavaScript Pseudoelement-Attribute (Pseudo-Element) erhält

CSS-Pseudoelemente sind sehr nützlich – Sie können damit CSS-Dreiecke erstellen, sie in Eingabeaufforderungsfeldern verwenden und Sie können damit auch viele einfache Aufgaben ohne Notwendigkeit erledigen für redundante HTML-Elemente. Bisher war der Zugriff auf CSS-Eigenschaften von Pseudoelementen mit JavaScript nicht möglich, aber jetzt gibt es eine neue JavaScript-Methode für den Zugriff darauf! Angenommen, Ihr CSS-Code sieht folgendermaßen aus:

.element:before {
	content: 'NEW';
	color: rgb(255, 0, 0);
}
Nach dem Login kopieren

Um die Stilattribute in .element:before abzurufen, können Sie den folgenden JavaScript-Code verwenden:

var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color')
Nach dem Login kopieren

Platzieren Sie das Pseudoelement als window.getComputedStyle method Im zweiten Parameter können Sie die Attribute im Pseudoelement-Stil abrufen! Tragen Sie diesen Tipp in Ihre Wissensdatenbank ein, und mit der Weiterentwicklung der Browser werden Pseudoelemente immer nützlicher!

Empfohlenes Tutorial: „Javascript-Grundlagen-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mit JavaScript Pseudoelement-Attribute (Pseudo-Element) erhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:webhek.com
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage