recherche

Maison >interface Web >js tutoriel >Comment puis-je récupérer la déclaration d'une classe CSS sous forme de chaîne ?

Comment puis-je récupérer la déclaration d'une classe CSS sous forme de chaîne ?

Susan Sarandon
Susan Sarandonoriginal
2024-12-11 11:30:12816parcourir

How Can I Retrieve a CSS Class's Declaration as a String?

Comment accéder et lire les valeurs des règles CSS

Question :

Comment puis-je obtenir la déclaration CSS complète d'un classe spécifique en tant que string?

Contexte :

Considérez le HTML et le CSS suivants :

<html>
  <head>
    <style>
      .test {
        width: 80px;
        height: 50px;
        background-color: #808080;
      }
    </style>
  </head>
  <body>
    <div class="test"></div>
  </body>
</html>

Étant donné ce CSS, je souhaite renvoyer une chaîne qui affiche la représentation de style en ligne de la classe .test, sans accéder directement au style individuel propriétés.

Réponse :

Pour obtenir la déclaration CSS complète d'une classe spécifique :

function getStyle(className) {
  var cssText = "";

  // Get all CSS rules
  var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;

  // Iterate through rules
  for (var x = 0; x < classes.length; x++) {
    // If the class name matches the rule
    if (classes[x].selectorText == className) {
      // Capture the CSS declaration
      cssText += classes[x].cssText || classes[x].style.cssText;
    }
  }

  // Return the captured CSS declaration
  return cssText;
}

// Usage example:
var result = getStyle(".test");
console.log(result); // Output: "width: 80px; height: 50px; background-color: #808080;"

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!

css html String class this Access
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
Article précédent：Pourquoi la méthode `map` de JavaScript échoue-t-elle sur les tableaux créés avec `new Array(count)` ?Article suivant：Pourquoi la méthode `map` de JavaScript échoue-t-elle sur les tableaux créés avec `new Array(count)` ?

Articles Liés

Voir plus