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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
Js 中debug方式
Feb 07 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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数组和explode函数示例总结
2015/05/08 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
php session的锁和并发
2016/01/22 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
keras 多gpu并行运行案例
2020/06/10 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
法人代表授权委托书
2014/04/08 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
五年级上册复习计划
2015/01/19 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
大学班干部竞选稿
2015/11/20 职场文书