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