Comment puis-je accéder efficacement aux styles de classe CSS à l'aide de JavaScript ?

Accès aux styles de classe CSS avec JavaScript/jQuery

Pour manipuler l'apparence visuelle d'un objet basé sur une classe CSS, les développeurs peuvent utiliser JavaScript ou la bibliothèque jQuery. Considérons une classe CSS nommée ".highlight" qui définit la couleur du texte sur rouge.

Une approche courante consiste à créer un élément invisible avec la classe highlight et à récupérer sa couleur pour l'animation. Toutefois, ce n’est pas une solution idéale. Une méthode plus efficace est décrite ci-dessous :

Solution

Une fonction JavaScript a été développée pour parcourir les feuilles de style et extraire la valeur de style souhaitée pour un sélecteur spécifique. Voici l'implémentation :

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;
}

Utilisation

Exemple d'utilisation de la fonction getStyleRuleValue :

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]);

Cette méthode permet aux développeurs de récupérer dynamiquement les styles de classe CSS à utiliser en JavaScript animations ou autres fonctionnalités dynamiques sans compter sur la création d'éléments invisibles.

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!