Получить значение CSS из таблицы внешнего стиля с помощью Javascript/jQuery

Можно ли получить значение из внешнего CSS страницы, если элемент, к которому относится стиль, еще не создан? (элемент должен генерироваться динамически).

Метод jQuery, который я видел, это $('element').css('property');, но это зависит от element, находящегося на странице. Есть ли способ узнать, что свойство задано внутри CSS, а не вычисленный стиль элемента?

Мне нужно сделать что-то некрасивое, как добавить скрытую копию элемента на мою страницу, чтобы я мог получить доступ к его атрибутам стиля?

Ответ 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>

Ответ 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"));

Обратите внимание, что это довольно хрупко, так как вам нужно предоставить полный текст селектора, который соответствует правилу, которое вы ищете (оно не анализируется), и оно не обрабатывает повторяющиеся записи или какие-либо правила приоритета. Мне тяжело думать о случае, когда использовать это было бы хорошей идеей, но здесь это просто пример.

Ответ 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", и вы ищете стиль верхнего края класса заголовка в этом элементе. Разумеется, изменитесь, чтобы соответствовать вашим потребностям.

В таблице стилей:

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

Дайте мне знать, что вы думаете - измените ли вы его, и если да, то как? Спасибо!

Ответ 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);
    }
});