Heim >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?
- Linda HamiltonOriginal
- 2024-12-09 03:01:09864Durchsuche
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!