改变dom样式的方法

改变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>结点赋值，改成

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">

</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>