Comment puis-je récupérer dynamiquement les styles de classe CSS à l'aide de JavaScript ou de jQuery ?

Comment récupérer dynamiquement les styles de classe CSS à l'aide de JavaScript/jQuery

Dans le développement Web, le style est souvent défini à l'aide de classes CSS. Pour modifier le style d'un élément en fonction d'une classe CSS, vous pouvez utiliser JavaScript ou jQuery.

Récupération de styles avec jQuery

jQuery fournit une méthode pratique pour accéder aux attributs de style depuis Classes CSS :

$(element).css(styleAttribute);

Par exemple, pour obtenir la couleur d'un élément avec la classe "highlight":

var color = $(element).css("color");

Méthode alternative utilisant une fonction

Une autre approche consiste à utiliser une fonction qui parcourt les feuilles de style du document :

function getStyleRuleValue(style, selector) {
  // Iterate through style sheets
  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];

    // Iterate through rules in the current sheet
    for (var j = 0; j < sheet.cssRules.length; j++) {
      var rule = sheet.cssRules[j];

      // Check if the rule matches the selector
      if (rule.selectorText.includes(selector)) {
        // Return the requested style
        return rule.style[style];
      }
    }
  }

  // No matching rule found
  return null;
}

Utilisation :

var color = getStyleRuleValue("color", ".highlight");

Cette fonction peut récupérer des styles à partir de feuilles de style en ligne et externes, mais il est limité aux feuilles externes du même domaine.

Exemple d'utilisation

Considérez la classe CSS suivante :

.highlight { 
    color: red; 
}

Pour animer la couleur d'un objet pour correspondre à la classe "highlight":

$(this).animate({
    color: getStyleRuleValue("color", ".highlight")
}, 750);

Cette approche vous permet de changer dynamiquement la couleur CSS et d'avoir l'animation répond à ces changements, offrant une expérience utilisateur transparente et cohérente.

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!