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

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

Linda Hamilton

Libérer： 2024-12-09 03:01:09

original

809 Les gens l'ont consulté

How Can JavaScript Access and Modify CSS Custom Properties?

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');

Copier après la connexion

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');

Copier après la connexion

Exemple

Considérez le code suivant :

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

Copier après la connexion

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!