Javascript：獲取輸入的CSS值不是計算值

很明顯，它可以做到Firebug做的，但我不確定他們是否在CSSDeclarations上做了很多處理，或者DOM中有什麼東西丟失，但我想抓住元素或樣式表的TYPED風格，而不是DOM似乎要回饋的cssText。Javascript：獲取輸入的CSS值不是計算值

一個例子就是邊框。如果我的元素有邊界：1px的固體＃000，在DOM給我回

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

我真正想要的背面是什麼我輸入，這是邊界：1px的固體＃000。

如果有人對這方面有任何想法，將不勝感激。

以下是CSS的DOM2規範：http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule這就是我不知道我是否錯過了某些東西，如果我應該在別處尋找的地方。

下面是我寫的代碼，似乎工作正常，但就像我說的，現在它只是回饋瀏覽器呈現的樣式和計算的樣式。不需要看代碼。我只是在尋找整體建議。我剛剛發佈的代碼來幫助別人，如果他們尋找的東西下手....

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

編輯#####################其實，我誤解了Firebug。看起來，Firefox的實際插件似乎在處理這些東西方面做得更好，但如果您使用的是Firebug Lite，則只需獲取渲染樣式。

來源

2010-10-05 Senica Gonzalez