abc.css.class1 
{
width:10px;
background-color: red;
} <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <link rel="stylesheet" type="text/css" href="abc.css" />   <TITLE> New Document </TITLE>
 <script>
window.onload=fnInit;
function fnInit(){
// 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.backgroundColor="#0000FF";
}
 </script>
 </HEAD> <BODY>
  <div class="class1">aaa</div>
 </BODY>
</HTML>

解决方案 »

  1.   

    这个问题大麻烦..
    如果是在 style 里还容易点
    在 link 里, IE里可以很容易解决, 在FF里只能遍历...
    一个参考函数1. Test.html
    2. Style.css1. Test.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>shawl.qiu template</title>
    <style type="text/css">
    /* <![CDATA[ *//* ]]> */
    </style>
    </head>
    <body><link type="text/css" rel="stylesheet" href="Style.css" id="LinkStyle" />
    <div class="Changed">
      <dl id="category_1_box">
        <dd value="0">请选择</dd>
      </dl>
      
      <dl id="category_2_box">
        <dd value="0">请选择</dd>
      </dl>
      
      <dl id="category_3_box">
        <dd value="0">请选择</dd>
      </dl>
      
      <dl id="category_4_box">
        <dd value="0">请选择</dd>
      </dl>
    </div>
    <br clear="both" /><div style="color:#ccc; padding:5px 2px; clear:both;">
      您当前选择的是:
      <span id="ProductCatStatus"></span>
    </div>
    <style type="text/css">
    /* <![CDATA[ *//* ]]> */
    </style><script type="text/javascript">
    /*<![CDATA[*/
    var LinkStyle =document.getElementById("LinkStyle");fReplaceLinkStyle(LinkStyle, "CatShow", "Changed", true);function fReplaceLinkStyle(LinkStyle, sFind, sReplace, bExact)
    {/* shawl.qiu code, void return */
      var sExact = "";
      if(bExact) sExact = "\\b";
      var Re = new RegExp(sExact+sFind+sExact, "g");
      
      if(LinkStyle.sheet)/* firefox */
      {
        var Rules = LinkStyle.sheet.cssRules;
        var Len = Rules.length;
        for(var i =0; i<Len; i++)
        {
          var Item = Rules.item(i);
          if(typeof Item.selectorText!="undefined")
          {
            if(Re.test(Item.selectorText)) 
            {
              LinkStyle.sheet.insertRule(Item.cssText.replace(Re, sReplace), Len++);
            }
          }
        }
        for(var i=Len-1; i>=0; i--)
        {
          var Item = Rules.item(i);
          if(typeof Item.selectorText!="undefined")
          {
            if(Re.test(Item.selectorText)) 
            {
              LinkStyle.sheet.deleteRule(i);
            }
          }
        }
      }
      else
      {
        LinkStyle.styleSheet.cssText = LinkStyle.styleSheet.cssText.replace(Re, sReplace);
      }
    }/* function fReplaceLinkStyle(LinkStyle, sFind, sReplace, bExact) */function fTestFunc(XObj)
    {/* shawl.qiu code, void return */
      var Ar = [];
      for(var i in XObj)
      {
       Ar.push(i.fontcolor("blue")+": "+XObj[i]);
      }  
      var div = document.createElement("div");
      with(div.style)
      {
        margin = "10px;";
        padding = "5px;"
        border = "1px solid blue";
      }
      div.innerHTML = Ar.join("<br/>");
      document.body.appendChild(div);
    }/* function fTestFunc(XObj) *//*]]>*/
    </script>
    </body>
    </html>2. Style.css
    .CatShow
    {
    }.CatShow dl
    {
      float:left;
      margin:0px 2px;
      border:1px solid #ccc;
      padding:0px;
      width:200px;
      height:277px;
      
      overflow:hidden;
      overflow-y:scroll;
    }.CatShow dl dd
    {
      margin:0px;
      padding:2px;
      display:block!important;
      width:180px;
    }.CatShow dl .HasItem
    {
      background:transparent url(Images/arrow.gif) no-repeat scroll 178px 10px!important;
      display:block;
      width:180px;
    }.CatShow dl .CurCat
    {
      background:#CAFFC0;
      border:1px solid #ccc;
      display:block;
      width:180px;
    }.CatShow dl .CurCat_HasItem
    {
      border:1px solid #ccc;
      background:#CAFFC0 url(Images/arrow.gif) no-repeat scroll 178px 10px!important;
      display:block;
      width:180px;
    }#ProductCatStatus
    {
      color:black;
      font-weight:bold;
    }
      

  2.   

    谢谢两位,基本和我已经用上的方法差不多。
    可能我没问清楚,就是说在js里把这个引用到的样式表修改后,要传给底层服务器端将修改后的样式保存到css文件,要怎么操作,如果是xml的话,通过dom操作可以直接传,但样式表要怎么传呢?
      

  3.   

    谢谢两位,基本和我已经用上的方法差不多。
    可能我没问清楚,就是说在js里把这个引用到的样式表修改后,要传给底层服务器端将修改后的样式保存到css文件,要怎么操作,如果是xml的话,通过dom操作可以直接传,但样式表要怎么传呢?
      

  4.   

    另外想问问,要去修改css文件,只能把它link进来再去取link里的引用么?总觉得拐了弯子。。
      

  5.   

    再请教一下如下这个css:
         .topSpace 
          {width:100%;height:9px;clear:both;}用 .style.cssText 取得整段样式内容,
    在firefox下按原文输出:width:100%;height:9px;clear:both;
    在IE下顺序作了变动(按什么排的还没搞清...),而且属性名为大写:CLEAR: both; WIDTH: 100%; HEIGHT: 9px
    有简单的办法保持一致吗?难道要一个个属性取出来作处理?
      

  6.   

    5楼的问题补充一下,不能修改帖子还真不方便。。是这样的,我想在那个页面里这个css文件进行操作,但不想让页面使用这个css文件里的样式,如果用link指令包进来的话,页面就会使用这个样式了。。
      

  7.   

    .class1{}
    .class2{}document.getElementById("name").classname="class1";
    document.getElementById("name").classname="class2";
      

  8.   

    JS当然不能修改并保存原始文件,它只能做到在DOM中修改并应用这些修改,要保存文件还是靠服务端来实现吧。