addRule在firefox下的兼容寫法

2019-11-21 02:26:40

字體：大中小

供稿：網(wǎng)友

現(xiàn)在用腳本控制 html 元素樣式的方法真的很多很多。
對(duì)單個(gè)元素可以直接 element.style.display=......修改一個(gè)樣式，也可以 element.className=...修改它的多個(gè)樣式。
對(duì)于多個(gè)元素修改樣式可以用腳本直接 import css文件。
目前項(xiàng)目中有這么一個(gè)需求。要求改變某 div下所有子孫結(jié)點(diǎn)的樣式，但不改變div本身樣式。
我當(dāng)時(shí)想都沒(méi)有想就留下了一下代碼：

復(fù)制代碼代碼如下:

<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")'>轉(zhuǎn)</button>

這段代碼一直工作得很好，直到有一天我同事告訴我，我的模塊讓他的瀏覽器崩潰了。

我打著手電筒，拿著放大鏡在近兩千多行的代碼中找了又找。.
根本找不到問(wèn)題出在哪里，而且當(dāng)時(shí)對(duì)于上面的代碼絲毫沒(méi)有懷疑過(guò)。
我們div 的id 是從數(shù)據(jù)庫(kù)里面直接讀取的，為數(shù)字類型，比如 <div id="345"></div>等等。
對(duì)于id 能取什么字符，我以前在 ie6和 ff1.5中測(cè)試過(guò)，

復(fù)制代碼代碼如下:

<div id="阿舜"></div> 
<div id="???"></div> 
<div  id="-1"></div> 

這樣的id設(shè)置，都可以用  
document.getElementById("阿舜") 
document.getElementById("???"), 
document.getElementById("-1"), 

讀出來(lái)不會(huì)有問(wèn)題，更何況是純數(shù)字呢.

最后經(jīng)過(guò)反復(fù)調(diào)試，找到這個(gè)罪魁禍?zhǔn)?nbsp;addRule.
document.styleSheets[0].addRule("#a1 *","background-color:red")
document.styleSheets[0].addRule("#123 *","background-color:red")
都沒(méi)有任何問(wèn)題
下面這行代碼卻會(huì)讓ie死掉. 內(nèi)存和虛擬內(nèi)存一直暴漲，我512的內(nèi)存，一下子xp就提示虛擬內(nèi)存不夠。
document.styleSheets[0].addRule("#-1 *","background-color:red");
同樣，在 ff1.5中，將導(dǎo)致函數(shù)出錯(cuò)，但不會(huì)崩潰。
總結(jié)：
   1。 ie,ff對(duì) id 的取值相當(dāng)寬容，id幾乎可以是任何字符，中文，英文，字母，數(shù)字，負(fù)數(shù)，特殊字符
   2。但是 addRule 函數(shù)中， id為負(fù)數(shù)時(shí)，在 ie和ff都會(huì)失敗，而且ie會(huì)崩潰。
附：
  addRule在 ff中的兼容寫法

復(fù)制代碼代碼如下:

<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> 
<script> 
function f(){ 
  var rule="#a1 *{background-color:red}"; 
  var index=document.styleSheets[0].cssRules.length; 
  document.styleSheets[0].insertRule(rule, index); 
} 
</script> 

<button onclick=f()>轉(zhuǎn)</button>