首页 >web前端 >js教程 >如何以字符串形式检索 CSS 类的声明？

如何以字符串形式检索 CSS 类的声明？

Susan Sarandon原创: 2024-12-11 11:30:12816浏览

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中文网其他相关文章！

css html String class this Access

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Why Does JavaScript's `map` Method Fail on Arrays Created with `new Array(count)`?下一篇：How Can I Efficiently Parse and Display JSON Data Using jQuery?

查看更多