如何更改FireBug扩展的css类的FireBug表示形式？

在FireBug css面板中乱七八糟时，您更改了原始css文件的表示形式。像：如何更改FireBug扩展的css类的FireBug表示形式？

.myCssClass { width: 100px; }

不过，如果你添加一个jQuery线这一点，

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

你结束（当然）了改变风格标签此元素与你看到你的原始宽度：在FireBug表示中，100px有一个很好的方法。

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

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

来源

2011-02-13 Jhonte

有什么不好strikethough，使用jQuery更改宽度值意味着你不能永久更改值在你的CSS定义，你只是操纵的价值你正在进行的会话。 – Hussein 2011-02-13 20:04:44

是的，我有一个FireBug扩展，它监听你的css变化。但是这个监听器不会触发样式标签更改：/。 – Jhonte 2011-02-13 21:32:04

对有关财产只需右键单击，然后edit [stylename]

来源

2011-02-13 15:56:28

我认为他想要一个编程方式。 – 2011-02-18 02:38:37

查找的“计算”选项卡，它会显示一个元素的属性所使用的实际值。 “样式”选项卡仅显示影响特定元素的“样式表值”，由于CSS级联规则和其他布局考虑因素，Firefox可能实际使用或不实际使用该元素。

Screenshot of Firebug, showing computed tab

来源

2011-02-13 16:16:13

谢谢你的回答，但那是我现在所追求的。我已编辑我的问题:) – Jhonte 2011-02-13 16:30:11

这是一个古老的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);

来源

2011-02-18 02:59:06

如何更改FireBug扩展的css类的FireBug表示形式？

回答

相关问题