改变dom样式有两种做法，一种是通过domNode.style.xxx = "",给domNode加上内置样式，这种方式如果需要的样式比较多，就只好一个个增加，比较麻烦，还有一种方式比较聪明，通过在css里预设好几种不同样式的类，然后需要更改某domNode的样式时，可以修改domNode的className，这是比较聪明的一种做法。
但是如果是某种类型的domNodes全都要改某种样式，这两种做法都需要遍历元素，对每一个进行操作一次，今天空想冒出个想法，能不能动态创建一个<style>节点，然后通过.innerHTML，给这个<style>节点填充css内容呢？
var newNode = document.creatElement("style");
document.body.appendChild(newNode);
newNode.innerHTML = "body{background:#000}";
按这个设想写了代码，结果在FF下执行正常，IE下没有出现我想要的效果。于是调试了半天，把.innerHTML换成.firstChild.nodeValue依然不行。最终发现，一直到document.body.appendChild(newNode);这一步都可以顺利执行，但是到了赋值这一步就不行了。于是换了种方法，直接在body里写上一个<style type="text/css" id ='test'></style>标签，然后用document.getElementById("test").innerHTML = "body{background:#000;}"来写，不动态创建节点了，结果还是在IE下不行。于是想偷偷骗浏览器一下试试，不直接把<style>结点赋值，改成
<div id = "test"></div>
document.getElementById("test").innerHTML = "<style type='text/css'>body{background:#000}</style>";
还是不行，哭 T_T
最终结论，FF下<style>结点是可读写的，而IE下<style>结点是只读的。
================================================================
后记：
今天找到一篇文章，讲的东西和我这篇文章讲的相似，但那篇文章里提到了ie下修改<style>标签的方法，有点生僻。转载过来。原文地址：http://hi.baidu.com/chenlinwei/blog/item/4a287f0a664c521995ca6b41.html
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
关于STYLE标签在FF,IE下的不同操作
有时候要动态的在页面中调整样式，需要用到对<style id="styleHandle"> .main a{text-decoration:none;}</style>标签的操作，这个在firefox下比较好办，
以jquery举例，只要$("#styleHandle").html("内容") 就可以了
但是在IE中，这样是不可以的。
IE对Style的处理很严格，不像其他普通的标签。
这里是IE对style标签操作的代码
var obj = document.styleSheets[document.styleSheets.length-1]; 获得style的引用
var rules = obj.rules || obj.cssRules;
var selectorText;
var styleObj = {};
for(var i=0;o=rules[i];i++){
selectorText = o.selectorText; 这个selectorText 就是 <style>里面的每个样式的名称
styleObj[selectorText] = o.style; 每个样式具体的样式map
}
操作到这里，比如我们现在要修改 开头所指的那个<style>中 .main a 的样式，将text-decoration设为underline
设置如下：
styleObj [".main A"].textDecoration = "underline";
注意这里的A要大写，不管你在style里面写的是大写还是小写，IE都会将a转换为大写。
完整测试代码:
<!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>无标题文档</title>
<style type="text/css">
<!--
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.height {
height:200px;
}
.width {
200px;
}
.color{
background-color:#CCCCCC;
}
.object_text{background-color:#CCCCCC;text-decoration:none; color:#377AD9; border-bottom: 1px none #377AD9;}
.object_text a:hover{background-color:#CCCCCC;text-decoration:none; color:#377AD9; border-bottom: 1px none #377AD9;}
-->
</style>
</head>
<body>
<hr />
Color:<br />
<input type="radio" name="radio" id="radio" value="#ff0000" onclick="c(this)" />#ff0000
<input type="radio" name="radio" id="radio2" value="#ff00ff" onclick="c(this)" />#ff00ff
<input type="radio" name="radio" id="radio3" value="#cc6600" onclick="c(this)" />#cc6600
<input type="radio" name="radio" id="radio4" value="#000000" onclick="c(this)" />#000000
<hr />
Width:
<input type="text" name="textfield" id="textfield" oninput="w(this)" onpropertychange="w(this)" />
Height:
<input type="text" name="textfield2" id="textfield2" oninput="h(this)" onpropertychange="h(this)" />
<table border="1">
<tr>
<td class="height width color"></td>
<td class="height width color"></td>
<td class="height width color"></td>
<td class="height width color"></td>
<td class="height width color"></td>
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
var o;
var obj = document.styleSheets[0];
var rules = obj.rules || obj.cssRules;
var styleObj = {};
var selectorText,readonly,style,cssText;
for(var i=0;o=rules[i];i++){
selectorText = o.selectorText;
//readonly = new String(o.readOnly); IE
//cssText = o.cssText; FF
style = o.style;
alert(selectorText);
document.write(selectorText.fontcolor("#ff0000"),"<br />");
styleObj[selectorText] = style;
}
function c(obj){
if(obj.checked)
styleObj[".color"].backgroundColor = obj.value;
}
function h(obj){
try{
styleObj[".height"].height = parseInt(obj.value) + "px";
}catch(e){}
}
function w(obj){
try{
alert(styleObj[".object_text A"].color);
styleObj[".width"].width = parseInt(obj.value) + "px";
}catch(e){
alert(e);
}
}
</script>