javascript - que - incluir hoja de estilos css

Obtenga un valor CSS de una hoja de estilo externa con Javascript/jQuery

Question

¿Es posible obtener un valor del CSS externo de una página si el elemento al que hace referencia el estilo aún no se ha generado? (el elemento debe ser generado dinámicamente).

El método jQuery que he visto es $(''element'').css(''property''); , pero esto depende de que el element esté en la página. ¿Hay alguna manera de descubrir en qué se establece la propiedad dentro del CSS en lugar del estilo calculado de un elemento?

¿Tendré que hacer algo feo como agregar una copia oculta del elemento a mi página para poder acceder a sus atributos de estilo?

Answer 1

Con 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>

Usando el DOM directamente:

// 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}

Nota: En ambos casos, si está cargando hojas de estilo externas, querrá esperar a que se carguen para ver su efecto en el elemento. Ni jQuery''s ready ni el evento DOMContentLoaded de DOM DOMContentLoaded hacen, tendrías que asegurarte de que no se carguen .

Answer 2

En respuesta a Karim79, pensé que descartaría mi versión de función de esa respuesta. Tuve que hacerlo varias veces, así que esto es lo que escribí:

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

Este ejemplo supone que tiene un elemento con clase = "contenedor" y está buscando el estilo de margen superior de la clase de título en ese elemento. Por supuesto, cambie para adaptarse a sus necesidades.

En la hoja de estilo:

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

Déjame saber lo que piensas: ¿lo modificarías y, de ser así, cómo? ¡Gracias!

Answer 3

He escrito una función auxiliar que acepta un objeto con los atributos CSS que se recuperarán de la clase CSS dada y rellena los valores reales de los atributos CSS. El ejemplo está incluido.

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 4

Normalmente debería permitir que el navegador aplique todas las reglas y luego pedirle al navegador los resultados, pero para el caso raro donde realmente necesite obtener el valor de la hoja de estilos puede usar esto: ( 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"));

Tenga en cuenta que esto es bastante frágil, ya que debe proporcionar el texto del selector completo que coincida con la regla que está buscando (no se analiza) y no maneja entradas duplicadas ni ningún tipo de reglas de precedencia. Es difícil para mí pensar en un caso cuando usar esto sería una buena idea, pero aquí solo es un ejemplo.