使用Javascript / jQuery从外部样式表获取CSS值

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

如果样式引用的元素尚未生成,是否可以从页面的外部CSS获取值?(该元素将被动态生成)。

我见过的jQuery方法是$('element').css('property');,但这依赖于element在页面上。有没有办法找出属性在CSS中设置的内容,而不是计算出的元素样式?

我会不得不做一些丑陋的事情,比如向我的页面添加元素的隐藏副本,以便我可以访问它的样式属性?

提问于
用户回答回答于

使用jQuery:

// Scoping function just to avoid creating a global
(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();
p {color: blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

直接使用DOM:

// Scoping function just to avoid creating a global
(function() {
    var p = document.createElement('p');
    document.body.appendChild(p);
    console.log(getComputedStyle(p).color);
    document.body.removeChild(p);
})();
p {color: blue}

注意:在这两种情况下,如果您要加载外部样式表,则需要等待它们加载才能看到它们对元素的影响。无论是jQuery的ready还是DOM的DOMContentLoaded事件都没有,你必须通过观察它们来加载来确保它。

用户回答回答于

通常情况下,您应该让浏览器应用所有规则,然后向浏览器询问结果,但对于极少需要从样式表中获取值的罕见情况,您可以使用以下代码:(JSFiddle

function getStyleSheetPropertyValue(selectorText, propertyName) {
    // search backwards because the last match is more likely the right one
    for (var s= document.styleSheets.length - 1; s >= 0; s--) {
        var cssRules = document.styleSheets[s].cssRules ||
                document.styleSheets[s].rules || []; // IE support
        for (var c=0; c < cssRules.length; c++) {
            if (cssRules[c].selectorText === selectorText) 
                return cssRules[c].style[propertyName];
        }
    }
    return null;
}

alert(getStyleSheetPropertyValue("p", "color"));

请注意,这非常脆弱,因为您必须提供与您查找的规则相匹配的完整选择器文本(未解析),并且它不处理重复条目或任何类型的优先规则。我很难想到使用这种方法的情况是一个好主意,但在这里只是一个例子。

扫码关注云+社区