1

我需要能够读取已加载网页的可用 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 中读取它们？我想避免对这些值进行硬编码，因为它们可能会改变。

4

1 回答 1

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%"

基于此答案的解决方案。

于 2012-11-03T00:39:17.637 回答