在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文件。 尽管可能，但它很笨拙，除非绝对必要，否则我建议您不要这样做。 如果需要， 此答案可以很好地覆盖它。

作为抓取标题信息的替代方法，可以使用HTMLElement.style并获取color值，但是请注意，这仅适用于内联样式：

 var span1 = document.getElementsByTagName('span')[0]; var span2 = document.getElementsByTagName('span')[1]; // Empty console.log(span1.style.color); // Blue console.log(span2.style.color); 

 .mystyle { color: #00c; } 

 <span class="mystyle">Text</span> <span style="color: #00c;">Text</span> 

但是，更好的解决方案是利用所谓的CSS变量 。 这些定义在:root ，带有双连字符前缀，可以用var()引用。 这使您仅可以设置一种颜色，然后将其重新用于color属性和background-color属性，如下所示：

 :root { --colour: #00c; } .a { color: var(--colour); } .b { background-color: var(--colour); } 

 <span class="a">Text</span> <span class="b">Text</span> 

希望这可以帮助！ :)

Answer 2

您可以使用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"/> 

Answer 3

尝试将window.getComputedStyle与getPropertyValue结合使用。

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

更多： https ： //developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

Answer 4

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

确实可以在元素上使用window.getComputedStyle(element) 。 但是，首先创建自己的元素（如果不存在）会带来重要的警告。 Firefox将正确计算计算出的样式。 但是，Chrome（可能还有Safari）将不会计算不属于DOM树的孤立元素的样式。 因此，如果您走那条路线，请确保将其添加到树的某个位置，可能作为隐藏元素。