js怎么修改style内部的内容

2013-03-28

js如何修改style内部的内容？文件中有headstyle typetext/css idtheme.skin{width:60color:#ff0

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{} ？？
[解决办法]
有两种办法可以解决这个问题：
第一种用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>

[解决办法]
暂没看到有直接修改<style>里类的属性方法。
用test.className= 【重定义节点类名】；element.style.width【重写节点样式】这些只是修改指定节点的样式，但实质还是没修改或者替换<style>里的.skin{}
[解决办法]
通过id移除该style节点
然后用document.createElement('style')创建一个style节点,再用innerHTML插入内容(如xx.innerHTML=".skin{width:90;color:White;}"),然后渲染到页面中就可以了
[解决办法]


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的控制台，在本页面，跑的上面的代码，代码运行后符合选择器的所有元素都被加上了边框。

热点排行

JavaScript

js怎么修改style内部的内容