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

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

Susan Sarandon

Libérer： 2024-12-11 11:30:12

original

815 Les gens l'ont consulté

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>

Copier après la connexion

É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;"

Copier après la connexion

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!