Wie kann JavaScript auf benutzerdefinierte CSS-Eigenschaften zugreifen und diese ändern?

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:

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

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!