Comment puis-je accéder et modifier les propriétés personnalisées CSS (variables) avec JavaScript ?

Accès aux propriétés personnalisées CSS (variables) via JavaScript

JavaScript fournit les moyens d'interagir avec les propriétés personnalisées CSS, appelées variables CSS. Bien qu'ils soient définis comme var() dans les feuilles de style, leur accès via JavaScript nécessite une approche légèrement différente.

Obtention et définition de propriétés personnalisées

Pour obtenir la valeur d'une propriété personnalisée propriété, utilisez la syntaxe suivante :

var value = document.body.style.getPropertyValue('--property-name');

De même, pour définir une propriété personnalisée, utilisez :

document.body.style.setProperty('--property-name', 'new-value');

Exemple d'implémentation

Considérez une propriété personnalisée --mycolor définie en CSS comme couleur d'arrière-plan d'un élément. Pour changer sa couleur à l'aide de JavaScript, vous pouvez exécuter le code suivant :

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

Méthodes alternatives

jQuery propose également des méthodes pour interagir avec les propriétés personnalisées :

// Get property
var value = $('body').css('--property-name');

// Set property
$('body').css('--property-name', 'new-value');

Éviter les pièges courants

Comme le démontre le exemple initial, l'accès aux propriétés personnalisées à l'aide de la syntaxe standard [style.property] (par exemple, document.body.style['--mycolor']) ne fonctionnera pas. Utilisez plutôt les méthodes getPropertyValue et setProperty avec un double trait d'union avant le nom de la propriété.

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!