改变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>結點賦值，改成
<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 {
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" οnclick="c(this)" />#ff0000
<input type="radio" name="radio" id="radio2" value="#ff00ff" οnclick="c(this)" />#ff00ff
<input type="radio" name="radio" id="radio3" value="#cc6600" οnclick="c(this)" />#cc6600
<input type="radio" name="radio" id="radio4" value="#000000" οnclick="c(this)" />#000000
<hr />
Width:
<input type="text" name="textfield" id="textfield" οninput="w(this)" onpropertychange="w(this)" />
Height:
<input type="text" name="textfield2" id="textfield2" οninput="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>
轉載于:https://www.cnblogs.com/cly84920/archive/2009/03/06/4427030.html
總結
以上是生活随笔為你收集整理的改变dom样式的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 树的直径，树的最长路dp思想
- 下一篇： alternatives命令使用方法