Web-Frontend
CSS-Tutorial
Wie kann JavaScript auf benutzerdefinierte CSS-Eigenschaften zugreifen und diese ändern?
Wie kann JavaScript auf benutzerdefinierte CSS-Eigenschaften zugreifen und diese ändern?
Zugriff auf benutzerdefinierte CSS-Eigenschaften mit JavaScript
JavaScript bietet Methoden für den Zugriff auf und die Bearbeitung benutzerdefinierter CSS-Eigenschaften, auch bekannt als CSS-Variablen. Im Gegensatz zu regulären CSS-Eigenschaften kann auf diese benutzerdefinierten Eigenschaften über die var(...)-Syntax im Stylesheet zugegriffen werden.
Benutzerdefinierte Eigenschaftswerte abrufen
Um den Wert von abzurufen Für eine benutzerdefinierte Eigenschaft verwenden Sie window.getComputedStyle(document.body).getPropertyValue('--name'), wobei --name der Name der benutzerdefinierten Eigenschaft ist. Zum Beispiel:
var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');Benutzerdefinierte Eigenschaftswerte festlegen
Um einen benutzerdefinierten Eigenschaftswert festzulegen, verwenden Sie document.body.style.setProperty('--name', value), wobei --name der Name der benutzerdefinierten Eigenschaft und value der neue Wert ist. Zum Beispiel:
document.body.style.setProperty('--foo-bar', 'red');Beispiel
Betrachten Sie den folgenden Code:
<body>
<p>Let's try to make this text bold and the background red.</p>
<button onclick="plain_js()">Plain JS</button>
<button onclick="jQuery_()">jQuery</button>
<script>
function plain_js() {
document.body.style.setProperty('--mycolor', 'red');
document.body.style['font-weight'] = 'bold';
};
function jQuery_() {
$('body').css('--mycolor', 'red');
$('body').css('font-weight', 'bold');
}
</script>
</body>Klicken Sie auf die Schaltfläche „Plain JS“ oder „jQuery“. wird nun die benutzerdefinierte Eigenschaft --mycolor auf Rot setzen und den Text fett formatieren.
Das obige ist der detaillierte Inhalt vonWie kann JavaScript auf benutzerdefinierte CSS-Eigenschaften zugreifen und diese ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass
Apr 03, 2025 am 10:30 AM
Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Vergleich von Browsern für reaktionsschnelles Design
Apr 02, 2025 pm 06:25 PM
Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben
Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor
Apr 02, 2025 am 04:27 AM
Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?
Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet?
Apr 05, 2025 pm 05:51 PM
Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...
