如何在 JavaScript 中获取所有类属性答案

【问题标题】：How can I get ALL class properties in JavaScript如何在 JavaScript 中获取所有类属性
【发布时间】：2017-09-19 18:59:46
【问题描述】：

是否有可能通过 JavaScript 获取类的所有属性？假设我有一堂课

.menu { color: black; width: 10px; }

如何通过 JavaScript 将 "color: black; width: 10px;" 作为字符串获取？

谢谢！

【问题讨论】：

对我来说，这听起来像是一个奇怪的问题。听起来您想手动将样式应用于节点，而不是使用类。由于 CSS 中的 C 级联，CSS 中的单个规则几乎没有意义。生成的样式将取决于您的 CSS 文件中的其他规则、它们的选择器的特殊性、规则的顺序以及与文档中这些特定选择器匹配的节点的上下文。

【解决方案1】：

您可以使用 getComputedStyle()。这将找到在 css 文件中完成的所有内联样式或 css 样式。这将返回元素计算的所有属性

见下面的sn-p

var el=document.getElementsByClassName("menu")[0];
style=getComputedStyle(el);
console.log(style);

.menu{
color:green;
background:blue;
opacity:1
}

&lt;div class="menu"&gt;&lt;/div&gt;

也可以从上面sn-p中的类中获取特定的属性，例子

style.width

【讨论】：

还请注意，返回的颜色不会是文字（如问题中的“黑色”），甚至不是十六进制的，如果它们是在 css 中设置的……取决于浏览器，它将是 rgb 或 rgba。要获得“黑色”，开发人员需要做更多的额外工作
与%、em 等尺寸类似的问题
感谢您的回答。 getComputedStyle 是我迄今为止一直在使用的。但这也会返回其他类的属性。我需要的是返回特定类的所有属性。 :(
在这种情况下，您将不得不深入研究所有样式标签的 innerHTML 并使用某种形式的解析器或正则表达式来查找该类。也请注意，如果您这样做，并不意味着类中的规则有效，因为其他样式表中可能有其他规则或内联样式覆盖了类的这些规则。