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操作cookie插件分享
Jan 14 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
浅析vue-router实现原理及两种模式
Feb 11 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
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
python math模块的基本使用教程
2021/01/16 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
党校学习思想汇报
2014/01/06 职场文书
个人银行贷款担保书
2014/04/01 职场文书
演讲稿开场白台词
2014/08/25 职场文书
安全先进个人材料
2014/12/29 职场文书
中学团支部工作总结
2015/08/13 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android