Obtenir une valeur CSS à partir d'une feuille de style externe avec Javascript / jQuery

Question

Est-il possible d'obtenir une valeur de la CSS d'une page si l'élément que le style se réfère n'a pas été générée encore? (l'élément est généré dynamiquement).

La méthode jQuery que j'ai vu est $('element').css('property');, mais cela dépend de l' element d'être sur la page. Est-il un moyen de trouver ce que la propriété est définie dans le CSS plutôt que le résultat d'un calcul de style d'un élément?

Vais-je avoir à faire quelque chose de laid comme ajouter une copie cachée de l'élément de ma page pour que je puisse accéder à ses attributs de style?

Answer 1

Cela semble fonctionner:

 <style>
p {color: blue}
</style>

$(document).ready(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    alert($p.css("color"));
    $p.remove();
});
 

Answer 2

Normalement, vous devriez laisser le navigateur appliquer toutes les règles, puis demander au navigateur pour les résultats, mais pour les rares cas où vous avez vraiment besoin pour obtenir la valeur de la feuille de style, vous pouvez utiliser ceci: (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");

Notez que c'est assez fragile, comme vous l'avez d'approvisionner l'ensemble du sélecteur de texte qui correspond à la règle que vous recherchez (il n'est pas analysé) et il ne gère pas les entrées en double ou toute sorte de règles de priorité. Il est difficile pour moi de penser à un cas lors de l'utilisation de ce serait une bonne idée, mais ici c'est un peu comme un exemple.

Answer 3

En réponse à Karim79, j'ai juste pensé que j'allais jeter ma version fonction de cette réponse. J'ai eu à faire plusieurs fois donc c'est ce que j'ai écrit:

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);

Cet exemple suppose que vous avez et de l'élément class="conteneur" et vous êtes à la recherche pour le margin-top de style du titre de la classe dans cet élément. Bien sûr modifier pour l'adapter à vos besoins.

Dans la feuille de style:

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

Laissez-moi savoir ce que vous pensez - vous de la modifier, et si oui, comment? Merci!

Answer 4

J'ai écrit une fonction d'assistance qui accepte un objet avec les attributs css à récupérer de la classe css donnée et remplit les valeurs d'attribut css réelles. Exemple est inclus.

 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

La lecture des propriétés d’une feuille de style en JavaScript n’est pas une tâche généralement prise en charge par les navigateurs. Par conséquent, la meilleure solution serait de créer un élément masqué avec la classe appropriée (ou tout autre élément faisant en sorte que le sélecteur CSS en question s’applique), puis de lire la propriété dans cette.

Notez que, même alors, vous lisez l'effet de somme de toutes les feuilles de style chargées. Ainsi, si plusieurs règles CSS s'appliquent à votre élément, vous risquez de ne pas obtenir la valeur attendue.