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 相关文章推荐
json简单介绍
Jun 10 Javascript
js null undefined 空区别说明
Jun 13 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python读取Excel的方法实例分析
2015/07/11 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python selenium 弹出框处理的实现
2019/02/26 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
Java面试题汇总
2015/12/06 面试题
物理专业本科生自荐信
2014/01/30 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
善意的谎言事例
2014/02/15 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年护士长工作总结
2014/11/11 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
导游词之西递宏村
2019/12/10 职场文书
python中的被动信息搜集
2021/04/29 Python
Java如何实现树的同构?
2021/06/22 Java/Android
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python