addRule在firefox下的兼容寫法
2024-09-06 12:44:23
供稿：網友
現在用腳本控制 html 元素樣式的方法真的很多很多。
對單個元素可以直接 element.style.display=......修改一個樣式，也可以 element.className=...修改它的多個樣式。
對于多個元素修改樣式可以用腳本直接 import css文件。
目前項目中有這么一個需求。 要求改變某 div下所有子孫結點的樣式，但不改變div本身樣式。
我當時想都沒有想就留下了一下代碼：
代碼如下:
<style>
span{background-color:blue;}
input{background-color:gray}
button{margin-top:70px;width:50px}
</style>
<!-- by Go_Rush(阿舜) from http://ashun.cnblogs.com/ --->
<div id="a1">
divdiv
<span>
spanspan
<h2>ttttt</h2>
</span>
<input>
</div>
<button onclick='document.styleSheets[0].addRule("#a1 *","background-color:red")'>轉</button>
這段代碼一直工作得很好，直到有一天我同事告訴我，我的模塊讓他的瀏覽器崩潰了。
我打著手電筒，拿著放大鏡在近兩千多行的代碼中找了又找。.
根本找不到問題出在哪里，而且當時對于上面的代碼絲毫沒有懷疑過。
我們div 的id 是從數據庫里面直接讀取的，為數字類型，比如 <div id="345"></div>等等。
對于id 能取什么字符，我以前在 ie6和 ff1.5中測試過，
代碼如下:
<div id="阿舜"></div>
<div id="???"></div>
<div id="-1"></div>
這樣的id設置，都可以用
document.getElementById("阿舜")
document.getElementById("???"),
document.getElementById("-1"),
讀出來不會有問題，更何況是純數字呢.
最后經過反復調試，找到這個罪魁禍首 addRule.
document.styleSheets[0].addRule("#a1 *","background-color:red")
document.styleSheets[0].addRule("#123 *","background-color:red")
都沒有任何問題
下面這行代碼卻會讓ie死掉. 內存和虛擬內存一直暴漲，我512的內存，一下子xp就提示虛擬內存不夠。
document.styleSheets[0].addRule("#-1 *","background-color:red");
同樣，在 ff1.5中，將導致函數出錯，但不會崩潰。
總結：
1。 ie,ff對 id 的取值相當寬容，id幾乎可以是任何字符，中文，英文，字母，數字，負數，特殊字符
2。 但是 addRule 函數中， id為負數時，在 ie和ff都會失敗，而且ie會崩潰。
附：
addRule在 ff中的兼容寫法
代碼如下:
<style>
span{}{background-color:blue;}
