javascript - 从外部类获取 CSS

Question

编辑添加了一个带有 regexpr 的测试来解决 techfoobar 指出的问题

为其他人编辑 2 个 更正的代码 hf :)

我正在寻找一种从指定类中获取所有静态样式的方法。我不想附加一个新的 div 并从中提取所有可能的值，因为值通常只是计算出来的......

以下是一些相关的帖子：

jQuery CSS插件返回元素的计算样式以伪克隆该元素？

jQuery 可以获取与元素关联的所有 CSS 样式吗？

http://quirksmode.org/dom/w3c_css.html

这是我到目前为止提出的：

function getExternalCSS(className) {
    var cssText = false;
    $.each(document.styleSheets, function(key, value) {
        $.each(value.cssRules, function(k, v) {
            if(new RegExp(className, "i").test(v.selectorText)) {
                cssText = v.cssText;
                return false;
            }
        });
        if(cssText !== false) {
            return false;
        }
    });
    return cssText;
}

css 浏览：

.someClass {
    style1...
}
.someOtherClass {
    style2...
}
.myClassToFind {
    style3...
}

用法：

    getExternalCSS(".myClassToFind");  //note the . for class

selectorText 正确返回，但if从未触发。我已经尝试解析为字符串等。有什么想法吗？

score 1 · Accepted Answer

更新

检查这个演示：http: //jsfiddle.net/XaB3T/1/

有几个问题：

a）您需要return false从 a$.each停止循环，就像break. 没有这样做。b）您正在检查肯定无法匹配的，因为v.selectorText.toLowerCase()并非都是小案例'.myClass''.myClass'

解释_For counting in only those styles that will be applied at the end, you might need to do a lot more!

CSS 特殊性规则请参考：

if永远不会返回 true，因为：

a) 选择器文本不必完全是.yourClass. 它可以是.a .yourClass，div.yourClass甚至.anotherClass, .yourClass等等……都指向你的元素

b）检查需要类似于：

for each selectorText {
   strip off any { character
   split the selector text by ',' into an array called parts
   for each part {
      check if it ends with '.yourClass' // if it does, this class is match
   }
}

另一个问题是 CSS 特异性。为了只计算那些将在最后应用的样式，您可能需要做更多的事情！

javascript - 从外部类获取 CSS

1 回答 1

Related

Reference