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事件都没有这样做，你必须通过watching for them to load确保它。

Answer 2

通常情况下，您应该让浏览器应用所有规则，然后向浏览器询问结果，但是对于您真正需要从样式表中获取值的罕见情况，您可以使用：{{3 }}）

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”的元素，并且您正在寻找该元素中标题类的margin-top样式。当然，改变以满足您的需求。

在样式表中：

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

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

Answer 4

我编写了一个辅助函数，它接受一个具有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);
    }
});

Answer 5

我写了这个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;
}

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

5 个答案: