addRule在firefox下的兼容写法


Posted in Javascript onNovember 30, 2006

现在用脚本控制 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;} 
  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()>转</button>
Javascript 相关文章推荐
jsonp原理及使用
Oct 28 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
JavaScript手风琴页面制作
May 17 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
使用javascript做在线算法编程
May 25 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
跟随鼠标旋转的文字
Nov 30 #Javascript
推荐:极酷右键菜单
Nov 29 #Javascript
双击滚屏-常用推荐
Nov 29 #Javascript
js获取单选按钮的数据
Nov 27 #Javascript
准确获得页面、窗口高度及宽度的JS
Nov 26 #Javascript
解决FireFox下[使用event很麻烦]的问题
Nov 26 #Javascript
DHTML 中的绝对定位
Nov 26 #Javascript
You might like
php的控制语句
2006/10/09 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
jquery实现metro效果示例代码
2013/09/06 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
javascript如何实现create方法
2019/11/04 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
Python素数检测实例分析
2015/06/15 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python实现全排列的打印
2018/08/18 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
python遍历路径破解表单的示例
2020/11/21 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
成品库仓管员岗位职责
2014/04/06 职场文书
程序员求职信
2014/04/16 职场文书
人事任命书怎么写
2014/06/05 职场文书
先进党支部事迹材料
2014/12/24 职场文书
五年级学生期末评语
2014/12/26 职场文书
我的生日感言
2015/08/03 职场文书
给学校的建议书400字
2015/09/14 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL