


Wie kann JavaScript auf benutzerdefinierte CSS-Eigenschaften zugreifen und diese ändern?
Dec 09, 2024 am 03:01 AMZugriff 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ßer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

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

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken
