suchen

Heim >Web-Frontend >js-Tutorial >Wie kann ich die Deklaration einer CSS-Klasse als String abrufen?

Wie kann ich die Deklaration einer CSS-Klasse als String abrufen?

Susan Sarandon
Susan SarandonOriginal
2024-12-11 11:30:12818Durchsuche

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

Wie greife ich auf CSS-Regelwerte zu und lese sie?

Frage:

Wie erhalte ich die vollständige CSS-Deklaration von a bestimmte Klasse als Zeichenfolge?

Kontext:

Berücksichtigen Sie das folgende HTML und CSS:

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

Angesichts dieses CSS möchte ich eine Zeichenfolge zurückgeben, die angezeigt wird die Inline-Stildarstellung der .test-Klasse, ohne direkt auf den einzelnen Stil zuzugreifen Eigenschaften.

Antwort:

Um die vollständige CSS-Deklaration einer bestimmten Klasse zu erhalten:

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

Das obige ist der detaillierte Inhalt vonWie kann ich die Deklaration einer CSS-Klasse als String abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html String class this Access
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum schlägt die „map“-Methode von JavaScript bei Arrays fehl, die mit „new Array(count)“ erstellt wurden?Nächster Artikel：Warum schlägt die „map“-Methode von JavaScript bei Arrays fehl, die mit „new Array(count)“ erstellt wurden?

In Verbindung stehende Artikel

Mehr sehen