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 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
js 居中漂浮广告
Mar 21 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
js变量以及其作用域详解
Jul 18 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
详解Vue之计算属性
2020/06/20 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
PyQt5实现简单的计算器
2020/05/30 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
七一建党节演讲稿
2014/09/11 职场文书
2014年健康教育工作总结
2014/11/20 职场文书