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限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php数组分页实现方法
2016/04/30 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
AngularJS获取json数据的方法详解
2017/05/27 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python中函数传参详解
2016/07/03 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
投资意向书范本
2014/04/01 职场文书
市级文明单位申报材料
2014/05/07 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书