Javascript: Get typisierte CSS-Werte NICHT berechnete Werte

Offensichtlich ist dies seit Firebug möglich, aber ich war mir nicht sicher, ob die CSSDeclarations viel verarbeitet wurden oder ob im DOM etwas fehlte, aber ich würde gerne den TYPED-Stil verwenden eines Elements oder Stylesheets und nicht des cssText, den das DOM zurückzugeben scheint.

Ein Beispiel wäre die Grenze. Wenn mein Element einen Rand hat: 1px solid # 000, gibt mir das DOM zurück

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

Alles, was ich wirklich zurück haben möchte, ist das, was ich eingetippt habe. Das war border: 1px solid # 000.

Wenn jemand irgendwelche Gedanken dazu hat, wäre es dankbar.

Hier sind die DOM2-Spezifikationen für CSS:http: //www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRul Da bin ich mir nicht sicher, ob mir etwas fehlt oder ob ich woanders suchen soll.

Hier ist der Code, den ich geschrieben habe, scheint gut zu funktionieren, aber wie ich bereits sagte, gibt er im Moment nur vom Browser gerenderte Stile und berechnete Stile zurück. KEINE Notwendigkeit, Code zu betrachten. Ich habe nur nach Vorschlägen gesucht. Ich habe gerade Code gepostet, um jemandem zu helfen, wenn er nach etwas sucht, mit dem er anfangen kann ....

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

EDIT ########################### Tatsächlich habe ich mich über Firebug geirrt. Es scheint, dass das eigentliche Plugin für Firefox die Dinge besser zu handhaben scheint, aber wenn Sie Firebug Lite verwenden, erhalten Sie nur die gerenderten Stile.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage