JavaScript/Prototype：如何获取CSS值，而不需要引用DOM元素？

Question

是否可以在不从DOM中获取实际元素的情况下，通过类名（例如类的宽度）从CSS文件中检索样式属性？

- user76568

---

非常有趣的问题...等待答案。 - Mehmet

Answer 1

是的。查看document.styleSheets属性。

https://developer.mozilla.org/zh-CN/docs/Web/API/document.styleSheets

http://www.quirksmode.org/dom/tests/stylesheets.html

- Greg Burghardt

Answer 2

这确实是可能的，但更加复杂。
您可以通过document.styleSheets属性访问样式表。

在每个样式表中，您都可以访问cssRules属性，其中包含该样式表中的所有CSS规则，因此要获取DOM中第一个样式表中的第一条规则，您可以执行以下操作

document.styleSheets[0].cssRules[0];

要查找特定的元素，您需要解析样式表，在某些情况下这会变得复杂，因为样式是继承的，但如果要查找特定的选择器和特定的样式：

var rules = document.styleSheets[0].cssRules,
    theRule = null;

for (var i=0; i<rules.length; i++) {
     if (rules[i].selectorText.toLowerCase() == '#myelement') {
         var width = rules[i].style.width;
         break;
     }
}

- adeneo

---

我猜想除了迭代并在href中匹配名称之外，没有其他方法可以通过名称从列表中选择CSS，对吗？ - user76568

@Dror - 实际上是有的，rules[i].selectorText 获取选择器文本，例如 #elementID 或 .class:hover 等。需要注意的是，像这样访问样式表通常是一个不好的主意，并且很难做到正确。 - adeneo

我指的是CSS文件的名称，你也是这个意思吗？ - user76568

哦不，你不能通过名称访问样式表，那么你必须获取链接标签，检查href，并在DOM中找到位置等。 - adeneo