如何以字符串形式检索 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中文网其他相关文章！