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 相关文章推荐
js异常捕获方法介绍
Apr 10 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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/12/06 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
模具设计与制造专业推荐信
2014/02/16 职场文书
人事科岗位职责范本
2014/03/02 职场文书
软件售后服务方案
2014/05/29 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书