javascript - 从 Javascript 中的命名 CSS 样式获取字段

Question

我有一个 HTML 文档，其头部有一个指向特定 CSS 样式表的链接标记:

<link rel="stylesheet" href="style.css" type="text/css">

这个 .css 文件包含一个特定的类，如下所示:

.mystyle {
    color: #00c;
}

我想做的是获取该类的 color 字段，以便我可以在页面的另一部分动态使用它(对于另一个元素的 background-color)。在 JavaScript 程序中是否有任何方法可以通过类的名称访问该信息？像这样:

var myColor = document.getStyle(".mystyle").color;

一些注意事项:

1. 可能有也可能没有链接自该 HTML 文档的其他样式表。
2. 页面上可能有也可能没有任何使用此特定类设置样式的特定元素。
3. 我已经尝试过将一个临时元素设置为具有给定的类，然后获取它的 color 字段。这不起作用:color 字段包含空字符串。

谢谢。

Answer 1

您可以使用 StyleSheetList 获取所有样式表信息和相关对象。

在下面的示例中，我聚合了所有文档的样式(即内联样式、外部引导样式表和 Stackoverflow 提供的样式表)，并检索了 .mystyle 类的颜色信息:

const sheets = [...document.styleSheets];
const rules = sheets.reduce((a, v) => [...a, ...v.cssRules || []], []);
const rule = rules.find(r => r.selectorText === '.mystyle');

console.log(rule.style.color);

.mystyle {
    color: #00c;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>