Comment puis-je récupérer efficacement les attributs de style CSS des classes à l'aide de JavaScript ?

Récupération des attributs de style à partir de classes CSS à l'aide de JavaScript/jQuery

Lorsque vous travaillez avec des animations de style en JavaScript, il peut être nécessaire d'accéder aux propriétés définies dans les classes CSS. Le défi se pose lorsqu'il faut mettre à jour dynamiquement l'animation en fonction des modifications CSS, en garantissant qu'elle reste cohérente.

Une approche consiste à utiliser un élément caché attribué à la classe CSS cible, à extraire sa couleur calculée, puis à l'utiliser dans l'animation. Cependant, cette méthode est généralement considérée comme inefficace.

Une solution plus robuste consiste à parcourir les feuilles de style associées au document et à rechercher le sélecteur spécifique et la propriété de style en question. Voici une implémentation d'une fonction qui effectue cette tâche :

function getStyleRuleValue(style, selector, sheet) {
  var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if (!sheet.cssRules) {
      continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
        return rule.style[style];
      }
    }
  }
  return null;
}

Exemple d'utilisation :

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); // searches a specific stylesheet

Cette fonction repose sur la possibilité de diviser une liste de sélecteurs séparés par des virgules et de vérifier si le sélecteur donné fait partie de la liste. Il prend en charge à la fois les règles groupées et les feuilles de style externes du même domaine.

En utilisant cette fonction, vous pouvez ajuster dynamiquement les animations de style en fonction des modifications des propriétés de classe CSS, garantissant ainsi que votre site Web ou votre application reste esthétiquement cohérent et réactif aux utilisateurs. préférences.

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!