Comment puis-je accéder aux attributs de style de classe CSS à l'aide de JavaScript ou de jQuery ?

Accéder à l'attribut de style de classe CSS à l'aide de JavaScript/jQuery

Lorsqu'il s'agit d'une animation CSS, il peut être difficile d'accéder aux attributs de style des éléments à partir d'une classe CSS utilisant JavaScript ou jQuery. Cependant, il existe des moyens efficaces de récupérer ces attributs.

Récupération d'un attribut de style à l'aide d'une fonction personnalisée

Une approche consiste à créer une fonction JavaScript personnalisée qui parcourt les feuilles de style du document. à la recherche du sélecteur et du style CSS correspondants. Voici un exemple de fonction :

function getStyleRuleValue(style, selector, sheet) {
  var sheets = sheet ? [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;
}

Par exemple, pour obtenir l'attribut color de la classe .highlight :

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

Remarque : Cette fonction suppose que le les feuilles de style sont définies en ligne ou ont le même domaine que le document actuel.

Application Animation

Avec l'attribut style récupéré, vous pouvez l'appliquer à votre animation :

$(this).animate({
    color: color // Retrieved color attribute
}, 750);

En mettant à jour la classe CSS du rouge au bleu, l'animation s'ajustera en conséquence, en alignant avec le style de couleur CSS mis à jour.

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!