Как изменить представление FireBug класса CSS с расширением FireBug?

Question

Когда вы возитесь на панели FireBug css, вы изменяете их представление исходного файла css.Например:

.myCssClass { width: 100px; }

Однако, если вы добавите к этому строку jQuery,

$(".myCssClass").css("width", "200px");

вы закончите (конечно) изменение тега стиля для этого элемента, и вы увидитеВаша исходная ширина: 100px зачеркнута в представлении FireBug.

Так что мой вопрос: знаете ли вы способ изменить «оригинальную» ширину: 100px вместо изменения тега стиля.Я предполагаю, что вам нужно через расширение FireBug для доступа к этому свойству, и это не проблема для меня.Но я не знаю, с чего начать:)

Редактировать: Я должен указать, что мне нужно изменить свойство с помощью кода!Либо из расширения FireBug, либо каким-либо образом перезагрузите соответствующий css, чтобы FireBug решил, что это оригинальное значение.

Answer 1

Вот старая функция JS, которая обычно хорошо работала для меня (До Стильная и Greasemonkey ).

Обратите внимание, что обычный JS имеет ограничения безопасности при доступе к некоторым таблицам стилей. Надстройка FF может обойти это, но тогда вам также следует остерегаться повреждения стилей браузера-хрома.

function replaceStyleRuleByName (sStyleName, sNewRule)
{
    var iNumStyleSheets = document.styleSheets.length;
    var bDebug          = 0;

    if (bDebug)     console.log ('There are ' + iNumStyleSheets + ' style sheets.');

    for (iStyleS_Idx=0;  iStyleS_Idx < iNumStyleSheets;  iStyleS_Idx++)
    {
        var iNumRules   = 0;
        var zStyleSheet = document.styleSheets[iStyleS_Idx];
        if (zStyleSheet)
        {
            /*---WARNING!
                This next line can throw an uncaught exception!
                Error: uncaught exception:
                     [Exception... "Access to restricted URI denied"  code: "1012"
                     nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
                     location: ... ...]
            */
            //--- try/catch for cross domain access issue.
            try
            {
                var zRules  = zStyleSheet.cssRules;
                if (zRules)
                {
                    iNumRules   = zRules.length;
                }
            }
            catch (e)
            {// Just swallow the error for now.
            }
        }

        if (bDebug)     console.log ("Style sheet " + iStyleS_Idx + " has " + iNumRules + " ACCESSIBLE rules and src: " + zStyleSheet.href);


        //for (var iRuleIdx=iNumRules-1;  iRuleIdx >= 0;  --iRuleIdx)
        for (var iRuleIdx=0;  iRuleIdx < iNumRules;  ++iRuleIdx)
        {
            if (zRules[iRuleIdx].selectorText == sStyleName)
            {
                zStyleSheet.deleteRule (iRuleIdx);
                if (bDebug)     console.log (sNewRule);
                if (sNewRule != null)
                {
                    zStyleSheet.insertRule (sStyleName + sNewRule, iRuleIdx);
                }

                //return;   //-- Sometimes changing just the first rule is not enough.
            }
        }

        //--- Optional: Punt and add the rule, cold, to any accessible style sheet.
        if (iNumRules > 0)
        {
            if (sNewRule != null)
            {
                try
                {
                    zStyleSheet.insertRule (sStyleName + sNewRule, iRuleIdx);
                }
                catch(e)
                {// Just swallow the error for now.
                }
            }
        }
    }
    return;
}

Пример использования:

replaceStyleRuleByName ('body',         '{line-height: 1.5;}' );
replaceStyleRuleByName ('#adBox',       '{display: none;}' );
replaceStyleRuleByName ('.BadStyle',    null );

Answer 2

Найдите вкладку «Вычисленные», в которой отображаются действительные значения свойств элемента. На вкладке «Стиль» отображаются только «значения таблицы стилей», которые влияют на определенный элемент, который может или не может фактически использоваться Firefox из-за каскадного правила CSS и других соображений компоновки.

Answer 3

Просто щелкните правой кнопкой мыши на объекте, а затем edit [stylename]