javascript - 是否可以使用 javascript 读取 DOM 中未使用的 css 类的样式？

Question

我需要能够读取已加载网页的可用 css 类。不是分配给 DOM 元素的类，而是在 CSS 中定义的类。使用 javascript 或特别是 jQuery 这可能吗？

我正在尝试一种骇人听闻的方式来覆盖我正在使用的 CMS (concrete5) 中内置的列，所以请多多包涵。在加载时，会有一些具有特定内联百分比宽度的 div，例如 style="width: 27%;"。在我的 css 中，有许多用于网格系统的类，例如 .one、.two、.three 等。我想匹配这些 div。

例如，我这里有 3 个 css 类:

.one { width: 8.3333%; }
.two { width: 16.6667%; }
.three { width: 25%; }

我的一个 div 的内联样式为 width: 22%;。我想为它分配最匹配的类，在本例中为 .three，并以编程方式删除内联样式。有没有办法让我阅读 .one, .two, .three, etc 未附加到元素时的样式，换句话说，直接从 css 读取它们？我想避免对这些值进行硬编码，因为它们可能会发生变化。

Answer 1

CSS类的宽度可以这样获取:

function getClassWidth(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i = 0; i < classes.length; i++) {
        if (classes[i].selectorText == className) {
            return classes[i].style.getPropertyValue("width");
        }
    }
}

getClassWidth('.one'); // Would return the string "8.3333%"

解决方案基于 this answer .