在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

通过抓取DOM并提取相关信息，可以使用JavaScript来读取实际的CSS文件。虽然可能，但它很笨重，除非绝对必要，否则我会反对。如果需要，this answer可以很好地解决它。

作为抓取标题信息的替代方法，您可以使用 HTMLElement.style 并获取count_Kprimes值，但请注意，这仅适用于内联< / strong> styles：

＆＃13;

＆＃13;

color

＆＃13;

var span1 = document.getElementsByTagName('span')[0];
var span2 = document.getElementsByTagName('span')[1];

// Empty
console.log(span1.style.color);

// Blue
console.log(span2.style.color);

＆＃13;

.mystyle {
    color: #00c;
}

＆＃13;

＆＃13;

＆＃13;

但是，更好的解决方案是使用所谓的 CSS variables 。这些在<span class="mystyle">Text</span> <span style="color: #00c;">Text</span>中定义，带有双连字符前缀，可以使用 var() 引用。这样，您只需设置一次颜色，然后将其重新用于 color 属性和 background-color 属性，如下所示：

＆＃13;

＆＃13;

:root

＆＃13;

:root {
  --colour: #00c;
}

.a {
  color: var(--colour);
}

.b {
  background-color: var(--colour);
}

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

Answer 2

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

在下面的示例中，我汇总了所有文档的样式（即内联样式，外部引导样式表和Stackoverflow提供的样式表），并检索.mystyle类的颜色信息：

＆＃13;

＆＃13;

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

＆＃13;

.mystyle {
    color: #00c;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

将window.getComputedStyle与getPropertyValue结合使用。

var elem = document.getElementsByClassName("mystyle"); var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("color");

更多：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Answer 4

对于任何可能追随我的人：

确实可以在元素上使用window.getComputedStyle(element)。但是，首先创建自己的元素（如果不存在）会带来一个重要的警告。 Firefox将正确计算计算出的样式。但是，Chrome（也可能是Safari）不会计算不属于DOM树的孤立元素的样式。因此，如果你走这条路线，一定要把它添加到某个地方的树上，可能是一个隐藏的元素。