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 GridView 实现自动计算操作代码
Mar 25 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python实现KNN邻近算法
2021/01/28 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
个人公开承诺书
2014/03/28 职场文书
文明寄语大全
2014/04/11 职场文书
态度决定一切演讲稿
2014/05/20 职场文书