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

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

Les propriétés CSS personnalisées, ou variables CSS, permettent de définir et de réutiliser les valeurs de style dans une feuille de style. . Pour manipuler ces propriétés à l'aide de JavaScript, plusieurs méthodes sont disponibles.

Une approche consiste à utiliser la méthode '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

Par exemple, dans l'extrait de code fourni où la propriété 'background-color' est définie à l'aide d'une propriété personnalisée '--(mycolor)', il serait modifié comme suit :

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

Cette méthode définit directement la valeur de la propriété personnalisée CSS et les modifications seront reflétées dans le style calculé de l'élément.

Vous pouvez également utiliser jQuery pour travailler avec CSS propriétés personnalisées :

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

Cette méthode utilise la fonction jQuery 'css()' pour définir ou récupérer la valeur d'une propriété CSS, y compris CSS variables :

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

En utilisant ces méthodes, vous pouvez contrôler dynamiquement les propriétés personnalisées CSS et modifier l'apparence visuelle de vos pages Web et applications.

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!