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 无限级联菜单案例分享
Mar 26 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
JavaScript分页组件使用方法详解
Jul 26 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP学习之数组的定义和填充
2011/04/17 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jquery 插件开发备注
2010/08/27 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python与pycharm有何区别
2020/07/01 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
活动倡议书范文
2014/05/13 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
2015政治思想表现评语
2015/03/25 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python