Comment JavaScript peut-il accéder et modifier les propriétés personnalisées CSS ?

Accès aux propriétés personnalisées CSS avec JavaScript

JavaScript fournit des méthodes pour accéder et manipuler les propriétés personnalisées CSS, également appelées variables CSS. Contrairement aux propriétés CSS classiques, ces propriétés personnalisées sont accessibles via la syntaxe var(...) dans la feuille de style.

Obtention des valeurs de propriété personnalisées

Pour récupérer la valeur de une propriété personnalisée, utilisez window.getComputedStyle(document.body).getPropertyValue('--name'), où --name est le nom de la propriété personnalisée. Par exemple :

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar');

Définition de valeurs de propriété personnalisées

Pour définir une valeur de propriété personnalisée, utilisez document.body.style.setProperty('--name', value), où --name est le nom de la propriété personnalisée et value est la nouvelle valeur. Par exemple :

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

Exemple

Considérez le code suivant :

  <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>

Cliquez sur le bouton "Plain JS" ou "jQuery" va maintenant définir la propriété personnalisée --mycolor sur rouge et mettre le texte en gras.

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!