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 操作下拉列表框实现代码
Feb 22 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
如何使JavaScript休眠或等待
Apr 27 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
简单易用的计数器(数据库)
2006/10/09 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
utf8的编码算法 转载
2006/12/27 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
opencv实现简单人脸识别
2021/02/19 Python
python中return的返回和执行实例
2019/12/24 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
后勤人员岗位职责
2013/12/17 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
药学职务聘任书
2014/03/29 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL
python缺失值填充方法示例代码
2022/12/24 Python