Javascript:获取键入的CSS值而不是计算值

时间:2010-10-05 21:48:39

标签: javascript css

显然它可以在Firebug之后完成,但是我不确定他们是否在CSSDeclarations上进行了大量处理,或者DOM中是否存在我缺少的东西,但是我想抓住它元素或样式表的TYPED样式,而不是DOM似乎回馈的cssText。

一个例子是边界。如果我的元素有边框:1px solid#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 solid#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);
};

EDIT ########################### 实际上,我误解了Firebug。似乎Firefox的实际插件似乎在处理这些东西方面做得更好,但是如果你使用的是Firebug Lite,你只需获得渲染的样式。

1 个答案:

答案 0 :(得分:1)

我实际上找到了我想要的答案。

cssText就是我想要的。这里注意到:http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

它无法正常工作的原因是因为我在页面加载时尝试了它,但它在实际渲染发生之前被触发,所以它返回未定义。

我正在进行一些重大修改,并在页面完成加载完成后尝试了,并且它出现了。

耶!