js如何修改style内部的内容？

文件中有
<head>
    <style type="text/css" id="theme">
       .skin{
          width:60;color:#ff0000;
       }
       .layout{
          width:260;height:40color:#fff;
       }
    </style>
</head>请问用JS如何修改.skin{}内部的内容 或替换掉整个.skin{} ？？

解决方案 »

  1.   

    有两种办法可以解决这个问题：
    第一种用className：<style type="text/css" id="theme">
        .skin{ width:60px;color:#ff0000; }
        .skin2{ width:80px;color:#008000; }
        .layout{ width:260;height:40px;color:#fff; }
    </style>
    <div id="test" class="skin">test skin</div>
    <script type="text/javascript">
    var test = document.getElementById('test');
    test.className = 'skin2';
    </script>第二种用cssText:<style type="text/css" id="theme">
        .skin{ width:60px;color:#ff0000; }
        .skin2{ width:80px;color:#008000; }
        .layout{ width:260;height:40px;color:#fff; }
    </style>
    <div id="test" class="skin">test skin</div>
    <script type="text/javascript">
    var test = document.getElementById('test');
    test.style.cssText = 'width:50px;color:green';
    </script>
      

  2.   

    element.style.width="200px"之类的试试
      

  3.   

    暂没看到有直接修改<style>里类的属性方法。
    用test.className= 【重定义节点类名】；element.style.width【重写节点样式】 这些只是修改指定节点的样式，但实质还是没修改或者替换<style>里的.skin{}
      

  4.   

    通过id移除该style节点
    然后用document.createElement('style')创建一个style节点,再用innerHTML插入内容(如xx.innerHTML=".skin{width:90;color:White;}"),然后渲染到页面中就可以了
      

  5.   


    var obj = document.styleSheets[0]; // [object StyleSheetList] 样式表的个数<link>
    var rule = null; // [object CSSRule]
    if (obj.cssRules){
      rule = obj.cssRules[1];  // 非IE [object CSSRuleList]
    } else {
      rule = obj.rules[1];     // IE [object CSSRuleList]
    } 
    console.log(rule.style.border); // 谷歌浏览器不能输出
    rule.style.border = '1px solid #000'
    这段代码在FF下是有效的。IE下没测试，复制的上次有个哥们的代码，第一行可以换成你要那个。我是在firebug的控制台，在本页面，跑的上面的代码，代码运行后符合选择器的所有元素都被加上了边框。