Maison >interface Web >js tutoriel >Comment puis-je extraire les valeurs des règles CSS et les renvoyer sous forme de styles en ligne ?

Comment puis-je extraire les valeurs des règles CSS et les renvoyer sous forme de styles en ligne ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-11 01:01:09132parcourir

How Can I Extract CSS Rule Values and Return Them as Inline Styles?

Extraction des valeurs de règle CSS

Pour extraire les valeurs d'une règle CSS et les renvoyer dans un format de style en ligne, une approche universelle est requise. Cela implique de parcourir toutes les règles CSS et d'identifier la règle cible en fonction de son sélecteur.

Considérez le CSS suivant :

.test {
    width: 80px,
    height: 50px,
    background-color: #808080;
}

L'extrait de code ci-dessous montre comment extraire les valeurs du fichier ". test" :

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

var rules = getStyle('.test');

La variable cssText contiendra désormais une chaîne avec les valeurs CSS pour la règle ".test", comme si elles ont été déclarés dans un style en ligne. Cette approche est polyvalente et peut être utilisée pour n'importe quelle règle CSS, quel que soit son contenu.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn