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 相关文章推荐
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
js分页工具实例
Jan 28 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
vue中的scope使用详解
Oct 29 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
使用Ajax实现进度条的绘制
Apr 07 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如何解决网站大流量与高并发的问题
2011/06/25 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
jQuery 选择器理解
2010/03/16 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python生成器generator用法实例分析
2015/06/04 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python如何转换字符串大小写
2020/06/04 Python
浅析python中的del用法
2020/09/02 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
中学清明节活动总结
2014/07/04 职场文书
实习推荐信格式模板
2015/03/27 职场文书
在职证明书模板
2015/06/15 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server