Comment puis-je récupérer le contenu des règles CSS en JavaScript ?

Obtenir le contenu des règles CSS

Savoir comment accéder aux valeurs des règles CSS peut être utile pour un style dynamique ou pour manipuler la présentation de vos éléments.

Pour renvoyer une chaîne contenant tout le contenu d'une règle CSS au format de style en ligne, vous pouvez utiliser l'approche suivante :

function getStyle(className) {</p>
<pre class="brush:php;toolbar:false">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;

}

alert(getStyle('.test'));

Dans ce code :

• getStyle est une fonction qui prend un nom de classe CSS en entrée et renvoie une chaîne contenant les valeurs de règle pour cela class.
• classes est un tableau de toutes les règles CSS de la première feuille de style du document.
• La boucle parcourt les règles, vérifiant si la propriété selectorText (qui contient le sélecteur associé à la règle) correspond au nom de classe donné.
• Si une correspondance est trouvée, la propriété cssText (qui contient la représentation en ligne de la règle) est ajoutée au Variable cssText.
• Enfin, la variable cssText est renvoyée et affichée dans une boîte d'alerte.

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!