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