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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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循环输出数据库内容的代码
2008/05/24 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
详解python中的 is 操作符
2017/12/26 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python实现控制台打印的方法
2019/01/12 Python
详解python中__name__的意义以及作用
2019/08/07 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
解决Python安装cryptography报错问题
2020/09/03 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
如何写出好的Java代码
2014/04/25 面试题
2015共产党员公开承诺书
2015/01/22 职场文书
golang json数组拼接的实例
2021/04/28 Golang