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 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
js中的this关键字详解
Sep 25 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
js利用iframe实现选项卡效果
Aug 09 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
15种PHP Encoder的比较
2007/04/17 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
php之可变函数的实例详解
2017/09/13 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
JS原型链怎么理解
2016/06/27 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python @property原理解析和用法实例
2020/02/11 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
九年级物理教学反思
2014/01/29 职场文书
一年级评语大全
2014/04/23 职场文书
市政管理求职信范文
2014/05/07 职场文书
主持人演讲稿
2014/05/13 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
安全生产标语大全
2014/10/06 职场文书
2015新学期开学寄语
2015/02/26 职场文书
起诉书范文
2015/05/20 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS