css - 如何更改带有 FireBug 扩展的 css 类的 FireBug 表示？

Question

当在 FireBug 的 css 面板中乱动时，您更改了它们对原始 css 文件的表示。喜欢:

.myCssClass { width: 100px; }

但是，如果您向其中添加 jQuery 行，

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

您最终(当然)更改了此元素的样式标签，您会看到原始的 width:100px 在 FireBug 表示中有一个删除线。

所以我的问题是，您是否知道更改“原始”宽度:100px 而不是更改样式标签的方法。我想您必须通过 FireBug 扩展才能访问该属性，这对我来说不是问题。但我不知道从哪里开始:)

编辑:必须指出我需要通过代码更改属性!从 FireBug 扩展或以某种方式重新加载相应的 css，以便 FireBug 认为它是原始值。

Answer 1

这是一个旧的 JS 函数，通常对我来说效果很好(在 Stylish 和 Greasemonkey 之前)。

请注意，普通 JS 对访问某些样式表有安全限制。 FF 附加组件可以解决这个问题，但您还需要提防损坏的浏览器 chrome 样式。

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