Comment puis-je accéder et modifier efficacement les propriétés personnalisées CSS à l'aide de JavaScript ?

Interagir avec les propriétés personnalisées CSS en JavaScript

Dans le développement Web moderne, les propriétés personnalisées CSS, également appelées variables CSS, jouent un rôle essentiel en améliorant la personnalisation du style et la maintenabilité du code. Ces propriétés peuvent être définies dans des feuilles de style et accessibles à l'aide de la syntaxe var(...). Cependant, y accéder et les manipuler via JavaScript présente un défi unique.

Accès et manipulation des propriétés personnalisées

Pour accéder à une propriété personnalisée CSS à l'aide de JavaScript, vous pouvez exploiter le document Méthode .body.style.setProperty(). Cette méthode accepte deux arguments :

• --name : Le nom de la propriété personnalisée, préfixé par deux tirets (--).
• value : La valeur à laquelle vous souhaitez attribuer la propriété.

Par exemple, pour modifier la propriété personnalisée '--mycolor' définie dans le code HTML fourni code :

document.body.style.setProperty('--mycolor', 'red');

jQuery pour la manipulation de propriétés

Vous pouvez également utiliser la méthode css() de jQuery pour obtenir le même résultat :

$('body').css('--mycolor', 'red');

Exemple

Dans le code HTML fourni, vous étiez tentative de modification de la propriété '--mycolor' en utilisant une syntaxe incorrecte. Pour obtenir l'effet souhaité, les modifications suivantes sont nécessaires :

function plain_js() { 
  document.body.style['font-weight'] = 'bold';
  document.body.style.setProperty('--mycolor', 'red');
}

function jQuery_() {
  $('body').css('font-weight', 'bold');
  $('body').css('--mycolor', 'red');
}

En utilisant la syntaxe appropriée, vous pouvez désormais définir avec succès à la fois la propriété 'font-weight' et la propriété personnalisée '--mycolor', changer dynamiquement le texte et la couleur d'arrière-plan de l'élément cible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!