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

如果样式引用的元素尚未生成，是否可以从页面的外部CSS获取值？（元素将动态生成）

我看到的jQuery方法是

$（'element'）.css（'property'）

，但这取决于页面上的

元素。有没有办法找出CSS中的属性设置为什么，而不是元素的计算样式

我是否需要做一些丑陋的事情，比如将元素的隐藏副本添加到我的页面，以便访问其样式属性？
使用jQuery：


//作用域函数只是为了避免创建全局
（功能（）{
var$p=$（“
”）.hide（）.appendTo（“body”）；
log（$p.css（“color”）；
$p.remove（）；
})();
p{color:blue}
我编写了一个helper函数，它接受一个具有css属性的对象，该对象将从给定的css类中检索，并填充实际的css属性值。
包括一个例子

function getStyleSheetValues(colScheme) {
    var tags='';
    var obj= colScheme;
    
    // enumerate css classes from object
    for (var prop in obj) { 
        if (obj.hasOwnProperty(prop) && typeof obj[prop]=="object") { 
            tags+= '<span class="'+prop+'"></span>';
        } 
    } 
    
    // generate an object that uses the given classes
    tags= $('<div>'+tags+'</div>').hide().appendTo("body");
    
    // read the class properties from the generated object
    var idx= 0;
    for (var prop in obj) { 
        if (obj.hasOwnProperty(prop) && typeof obj[prop]=="object") { 
            var nobj= obj[prop];
            for (var nprop in nobj) { 
                if (nobj.hasOwnProperty(nprop) && typeof(nobj[nprop])=="string") { 
                    nobj[nprop]= tags.find("span:eq("+idx+")").css(nobj[nprop]);
                }
            }
            idx++;
        } 
    } 
    tags.remove();
}

// build an object with css class names where each class name contains one 
// or more properties with an arbitrary name and the css attribute name as its value.
// This value will be replaced by the actual css value for the respective class.
var colorScheme= { chart_wall: {wallColor:'background-color',wallGrid:'color'}, chart_line1: { color:'color'} };

$(document).ready(function() {
    getStyleSheetValues(colorScheme);

    // debug: write the property values to the console;     
    if (window.console) {
        var obj= colorScheme;
        for (var prop in obj) { 
            if (obj.hasOwnProperty(prop) && typeof obj[prop]=="object") { 
                var nobj= obj[prop];
                for (var nprop in nobj) { 
                    if (nobj.hasOwnProperty(nprop)) { 
                        console.log(prop+'.'+nprop +':'+ nobj[nprop]);
                    }
                }
            } 
        } 
        // example of how to read an individual css attribute value
        console.log('css value for chart_wall.wallGrid: '+colorScheme.chart_wall.wallGrid);
    }
});

函数getStyleSheetValues（colScheme）{
var标签=“”；
var obj=colScheme；
//从对象枚举css类
对于（obj中的var prop）{
if（obj.hasOwnProperty（prop）&&typeof obj[prop]=“object”）{
标签+=''；
} 
} 
//生成使用给定类的对象
tags=$（''+tags+''）.hide（）.appendTo（“body”）；
//从生成的对象中读取类属性
var-idx=0；
对于（obj中的var prop）{
if（obj.hasOwnProperty（prop）&&typeof obj[prop]=“object”）{
var nobj=对象[prop]；
对于（nobj中的var nprop）{
if（nobj.hasOwnProperty（nprop）和&typeof（nobj[nprop]）==“string”）{
nobj[nprop]=tags.find（“span:eq（+idx+）））.css（nobj[nprop]）；
}
}
idx++；
} 
} 
tags.remove（）；
}
//使用css类名构建一个对象，其中每个类名包含一个
//使用任意名称和css属性名称作为其值的一个或多个属性。
//该值将被相应类的实际css值替换。
var colorScheme={chart_wall:{wallColor:'background-color'，wallGrid:'color'}，chart_line1:{color:'color'}；
$（文档）.ready（函数（）{
getStyleSheetValues（colorScheme）；
//调试：将属性值写入控制台；
if（window.console）{
var obj=颜色方案；
对于（obj中的var prop）{
if（obj.hasOwnProperty（prop）&&typeof obj[prop]=“object”）{
var nobj=对象[prop]；
对于（nobj中的var nprop）{
if（nobj.hasOwnProperty（nprop））{
log（prop+'.+nprop+'：'+nobj[nprop]）；
}
}
} 
} 
//如何读取单个css属性值的示例
log（'chart_wall.wallGrid的css值：'+colorScheme.chart_wall.wallGrid）；
}
});
作为对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);

让我知道你的想法-你会修改它，如果会，如何修改？谢谢
 通常情况下，您应该让浏览器应用所有规则，然后向浏览器询问结果，但对于确实需要从样式表中获取值的罕见情况，您可以使用以下命令：（）

函数getStyleSheetPropertyValue（selectorText，propertyName）{
//向后搜索，因为最后一个匹配更有可能是正确的
对于（var s=document.styleSheets.length-1；s>=0；s--）{
var cssRules=document.styleSheets[s].cssRules||
document.styleSheets[s].规则| |[]；//IE支持
对于（var c=0；c

---

请注意，这是非常脆弱的，因为您必须提供与正在查找的规则相匹配的完整选择器文本（它未被解析），并且它不处理重复条目或任何类型的优先规则。我很难想出一个好主意，但这里只是一个例子。

我编写了这个js函数，似乎也适用于嵌套类：

用法：

var style = get_css_property('.container-class .sub-container-class .child-class', 'margin');
console.log('style');


function get_css_property(class_name, property_name){
    class_names = class_name.split(/\s+/);
    var container = false;
    var child_element = false;

    for (var i = class_names.length - 1; i >= 0; i--) {
        if(class_names[i].startsWith('.'))
            class_names[i] = class_names[i].substring(1);
        var new_element = $.parseHTML('<div class="' + class_names[i] + '"></div>');
        if(!child_element)
            child_element = new_element;
        if(container)
            $(new_element).append(container);
        container = new_element;
    }
    $(container).hide().appendTo('body');
    var style = $(child_element).css(property_name);
    $(container).remove();
    return style;
}

var style=get_css_属性（'.container class.sub container class.child class'，'margin'）；
console.log（'style'）；
函数get\u css\u属性（类名称、属性名称）{
class_name=class_name.split（/\s+/）；
var容器=false；
var child_元素=false；
对于（var i=class_names.length-1；i>=0；i--）{
if（类名称[i].startsWith（'.'））
类名称[i]=类名称[i]。子字符串（1）；
var new_元素=$.parseHTML（“”）；
if（！child_元素）
子元素=新元素；
if（集装箱）
$（新元素）。追加（容器）；
容器=新的_元素；
}
$（container.hide（）.appendTo（'body'）；
var style=$（子元素）.css（属性名称）；
$（容器）.remove（）；
回归风格；
}

是的，它就是这样。思考：如果样式是嵌套的，请确保它嵌套在适当的元素下。例如CSS:.container.content{}和jQuery:var$p=$（“”）hide（）.appendTo（“容器”）；我们不能在不向DOM添加元素的情况下获得css属性值吗？类似于

$（''）.css（'color'）

这适用于me@PierredeLESPINAY：在Firefox中似乎有效，但在Webkit浏览器（Chromium和Android 2.x浏览器）中无效。您是否可以对高度

进行同样的操作？因为它似乎不是真的工作…伟大的片段，我稍微修改了它，因为使用div阻止了我查找rules co
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"));

var style = get_css_property('.container-class .sub-container-class .child-class', 'margin');
console.log('style');


function get_css_property(class_name, property_name){
    class_names = class_name.split(/\s+/);
    var container = false;
    var child_element = false;

    for (var i = class_names.length - 1; i >= 0; i--) {
        if(class_names[i].startsWith('.'))
            class_names[i] = class_names[i].substring(1);
        var new_element = $.parseHTML('<div class="' + class_names[i] + '"></div>');
        if(!child_element)
            child_element = new_element;
        if(container)
            $(new_element).append(container);
        container = new_element;
    }
    $(container).hide().appendTo('body');
    var style = $(child_element).css(property_name);
    $(container).remove();
    return style;
}