Javascript: Obtenga valores CSS escritos NO valores calculados

Question

Oct 05, 2010, 11:48 PM

Javascript: Obtenga valores CSS escritos NO valores calculados

Obviamente se puede hacer como Firebug lo hace, pero no estaba seguro de si estaban haciendo un gran procesamiento en las Declaraciones CSS o si había algo en el DOM que me faltaba, pero me gustaría tomar el estilo TIPADO de un elemento u hoja de estilo y no el cssText que el DOM parece estar devolviendo.

Un ejemplo sería la frontera. Si mi elemento tiene borde: 1px sólido # 000, el DOM me devuelve

border-top-width:1px;
border-right-width-value:;
border-right-width-ltr-source:;
border-right-width-rtl-source:;
border-bottom-width:1px;
border-left-width-value:;
etc.....

Todo lo que realmente quiero es lo que escribí, que era border: 1px solid # 000.

Si alguien tiene alguna idea al respecto, sería apreciado.

Aquí están las especificaciones DOM2 para CSS:http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule Ahí es donde no estoy seguro si me falta algo, o si debería estar buscando en otro lado.

Aquí está el código que escribí, parece funcionar bien, pero, como dije, en este momento solo está devolviendo los estilos renderizados del navegador y los estilos calculados. NO NECESITA mirar el código. Solo estaba buscando sugerencias en general. Acabo de publicar un código para ayudar a alguien si estaban buscando algo para empezar ...

bg.fn.cssNavigator = function(){
var el = bg(this)[0]; //Only take first element.
var context = bg(this).context; //What document are we looking at?
if(!document.getElementById('plugins-bg_css_navigator-wrapper')){
    jQuery("body").append('<div id="plugins-bg_css_navigator-wrapper"><div id="plugins-bg_css_navigator-css"></div></div>');
}
var t = '';
t = t+'<div>Inline Style</div><div>';
if(el.style){
    var els = el.style;
    for(var i=0; i<els.length; i++){
        var s = els[i];
        t = t+s+':'
        t = t+window.getComputedStyle(el, null).getPropertyValue(s)+';<br />';      }
}
t = t+'</div>';
t = t+'<div>Computed Style</div><div>';
var cs = window.getComputedStyle(el, null);
for(var i = 0; i<cs.length; i++){
    //if(typeof cs[i] === "function"){ break; }
    t = t+cs[i]+':'+cs.getPropertyValue(cs[i])+'<br />';    
}
t = t+'</div>';
var ssc = context.styleSheets;
for( var i in ssc ){
    var isTab = false;
    if(undefined !== jQuery(ssc[i].ownerNode).attr("href")){
        t = t+'<div>'+jQuery(ssc[i].ownerNode).attr("href")+'</div>';
        isTab = true;
    }else if(undefined !== ssc[i].ownerNode){
        t = t+'<div>Current File</div>';
        isTab = true;
    }
    if(isTab){
        t = t+'<div stylesheet="'+i+'">';
        try{
            var sscr = ssc[i].cssRules;
            for( var j in sscr ){
                if(undefined !== ssc[i].cssRules[j].cssText){
                    t = t+ssc[i].cssRules[j].cssText+'<br />';
                }
            }
        //If we get an error, then all the stylesheets are not loaded, let's exit and try again in 100 milliseconds
        }catch(e){ setTimeout( function(){ bg(el, context).cssNavigator(); }, 100 ); return false; }
        t = t+'</div>';
    }
}
jQuery("#plugins-bg_css_navigator-css").html(t);
};

EDITAR ########################### En realidad, me equivoqué sobre Firebug. Parece que el complemento real para Firefox parece hacer un mejor trabajo sobre el manejo de esas cosas, pero si está usando Firebug Lite, solo obtiene los estilos renderizados.

Deja tu comentario