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

Zugriff auf benutzerdefinierte CSS-Eigenschaften mit JavaScript

Benutzerdefinierte CSS-Eigenschaften oder CSS-Variablen bieten eine Möglichkeit, Stilwerte in einem Stylesheet zu definieren und wiederzuverwenden . Um diese Eigenschaften mithilfe von JavaScript zu manipulieren, stehen mehrere Methoden zur Verfügung.

Ein Ansatz ist die Methode „document.body.style.setProperty()“:

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

document.body.style.setProperty('--foo-bar', newValue); //set

Zum Beispiel in Das bereitgestellte Code-Snippet, in dem die Eigenschaft „background-color“ mithilfe einer benutzerdefinierten Eigenschaft „--(mycolor)“ festgelegt wird, würde wie folgt geändert werden folgt:

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

Diese Methode legt den Wert der benutzerdefinierten CSS-Eigenschaft direkt fest und Änderungen werden im berechneten Stil des Elements widergespiegelt.

Alternativ können Sie jQuery verwenden, um mit CSS zu arbeiten benutzerdefinierte Eigenschaften:

$('body').css('--foo-bar', newValue); //set

Diese Methode verwendet die jQuery-Funktion „css()“, um den Wert einer CSS-Eigenschaft, einschließlich CSS, festzulegen oder abzurufen Variablen:

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

Mit diesen Methoden können Sie benutzerdefinierte CSS-Eigenschaften dynamisch steuern und das visuelle Erscheinungsbild Ihrer Webseiten und Anwendungen ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript auf benutzerdefinierte CSS-Eigenschaften zugreifen und diese ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!