Javascript: получить типизированные значения CSS, а не вычисленные значения

Очевидно, что это можно сделать, так как Firebug делает, но я не был уверен, много ли они обрабатывали в CSSDeclarations или в DOM было что-то, чего мне не хватает, но я бы хотел воспользоваться стилем TYPED: элемент или таблица стилей, а не cssText, который DOM, похоже, возвращает.

Примером будет граница. Если у моего элемента есть граница: 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.

Если у кого-то есть какие-либо мысли на этот счет, это будет оценено.

Вот спецификации DOM2 для CSS: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, вы просто получаете отрендеренные стили.

Ответы на вопрос(1)

Я действительно нашел ответ, который искал.

cssText - это то, что я искал. Здесь отмечено:http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

Причина, по которой это не сработало, заключается в том, что я пробовал это, когда страница загружалась, но она запускалась до того, как произошел фактический рендеринг, поэтому он возвращал undefined.

Я делал некоторые серьезные изменения и пробовал это после того, как страница полностью загрузилась, и она появилась.

Ура!

 Florian Margaine16 окт. 2013 г., 15:29
Этоstyle атрибут, а не то, что было написано в файле CSS.

Ваш ответ на вопрос