Comment obtenir et définir des propriétés personnalisées CSS (propriétés accessibles via var(…) dans une feuille de style) à l'aide de JavaScript (plain ou jQuery) ?
C'est ma tentative infructueuse : cliquer sur le bouton modifie les propriétés font-weight 属性，但不会更改自定义 --mycolor habituelles :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body {
--mycolor: yellow;
background-color: var(--mycolor);
}
</style>
</head>
<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['font-weight'] = 'bold';
document.body.style['--mycolor'] = 'red';
};
function jQuery_() {
$('body').css('font-weight', 'bold');
$('body').css('--mycolor', 'red');
}
</script>
</body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Solution native
La méthode standard pour obtenir/définir des variables CSS3 est
.setProperty()和.getPropertyValue().Si vos variables sont des variables globales (déclarées dans
:root), vous pouvez utiliser ce qui suit pour obtenir et définir leurs valeurs.// setter document.documentElement.style.setProperty('--myVariable', 'blue'); // getter document.documentElement.style.getPropertyValue('--myVariable');Cependant, si la valeur de var a été définie à l'aide de
.setProperty(), le getter ne renverra que cette valeur. S'il est défini via une déclaration CSS,undefinedsera renvoyé. Découvrez-le dans cet exemple :Pour éviter ce comportement inattendu, vous devez appeler la méthode
.getPropertyValue()之前使用getCompulatedStyle(). Le getter ressemblera alors à ceci :getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');À mon avis, l'accès aux variables CSS devrait être plus simple, plus rapide, intuitif et naturel...
Mon approche personnelle
J'ai implémenté
CSSGlobalVariablesun petit assistant javascript ( pour un accès et une manipulation plus faciles .Toutes les modifications appliquées aux propriétés de l'objet sont automatiquement converties en variables CSS.
Disponible : https://github.com/colxi/ css-global variables
Vous pouvez utiliser
document.body.style.setProperty('--name', value);:var bodyStyles = window.getComputedStyle(document.body); var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get document.body.style.setProperty('--foo-bar', newValue);//set