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

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 в этом элементе. Конечно, изменитесь, чтобы соответствовать вашим потребностям.

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

 .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;
}