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

Question

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

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

我是否必须做一些丑陋的事情,比如在我的页面中添加元素的隐藏副本,以便我可以访问其样式属性？

Answer 1

使用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事件都没有这样做,你必须通过观察它们加载来确保它.

Answer 2

通常你应该让浏览器应用所有规则然后向浏览器询问结果,但是对于极少数情况你需要从样式表中获取值,你可以使用它:(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"));

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

Answer 3

为了回应Karim79,我只是想我会丢掉我的功能版本的答案.我不得不这样做几次,所以这就是我写的:

function getClassStyles(parentElem, selector, style){
    elemstr = '<div '+ selector +'></div>';
    var $elem = $(elemstr).hide().appendTo(parentElem);
        val = $elem.css(style);
    $elem.remove();
    return val;
}
val = getClassStyles('.container:first', 'class="title"', 'margin-top');
console.warn(val);

这个例子假设你有class ="container"的元素,并且你正在寻找该元素中title类的margin-top样式.当然,改变以满足您的需求.

在样式表中:

 .container .title{ margin-top:num; }

让我知道你的想法 - 你会修改它,如果是这样的话？谢谢!