5 Stimmen

Javascript: Get typed CSS-Werte NICHT berechnete Werte

Offensichtlich kann es getan werden, da Firebug tut, aber ich war nicht sicher, wenn sie eine Menge von Verarbeitung auf die CSSDeclarations tun oder wenn es etwas in der DOM, die ich vermisse, aber ich möchte die TYPED Stil eines Elements oder Stylesheet und nicht die cssText, die die DOM zurück zu geben scheint zu greifen.

Ein Beispiel wäre die Grenze. Wenn mein Element border:1px solid #000 hat, gibt das DOM mir 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 eingegeben habe, nämlich border:1px solid #000.

Wenn jemand eine Idee dazu hat, wäre ich dankbar.

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

Hier ist der Code, den ich schrieb, scheint gut zu funktionieren, aber, wie ich sagte, im Moment ist es nur zurück Browser gerendert Stile und berechnete Stile. NO NEED, um Code zu sehen. Ich war nur auf der Suche nach Vorschlägen im Allgemeinen. Ich habe nur Code gepostet, um jemandem zu helfen, wenn sie nach etwas suchen, um mit.... zu beginnen.

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########################### Eigentlich habe ich mich bei Firebug geirrt. Es scheint, dass das eigentliche Plugin für Firefox eine bessere Arbeit über die Handhabung dieses Zeug zu tun scheint, aber wenn Sie Firebug Lite verwenden, erhalten Sie nur die gerenderten Stile.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X