如何以字串形式檢索 CSS 類別的宣告？-js教程-PHP中文網

如何以字串形式檢索 CSS 類別的宣告？

Susan Sarandon

發布： 2024-12-11 11:30:12

原創

842 人瀏覽過

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

如何存取和讀取CSS規則值

問題：

如何取得得到一個完整的CSS聲明特定類別作為string?

上下文：

考慮以下HTML 和CSS：

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

登入後複製

給定此CSS，我想傳回一個顯示的字串.test 類別的內聯樣式表示，無需直接存取單獨的樣式

答案：

取得特定類別的完整CSS 聲明：

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

登入後複製

以上是如何以字串形式檢索 CSS 類別的宣告？的詳細內容。更多資訊請關注PHP中文網其他相關文章！