js 操作css实现代码


Posted in Javascript onJune 11, 2009

当我们需要的是一条规则的时候,总不能在每次dom发生变化的时候去执行这个操作,否则也太效率低下了。
好在dom中css rules也是可以修改的。不过不同浏览器的对于css rules的接口描述也不同,其中ie中以类似hash table的方式,而ff以数组方式。
从可编程性上说,ie的接口描述更讨程序员喜欢,不过从逻辑上说,ff显然更为合理。
我提供了类似于ie的方式对两套代码进行简单包装,不过ie在dom的css removeRule之后并不能确定同步的把规则兑现。所以最好用规则覆盖的方式而非remove。
需要注意的是,在使用改js函数的时候,页面上至少要有一个style标签。下面是代码及示例。

<style> 
#a: 
{ 
color: blue; 
} 
</style> 
<style> 
#a: 
{ 
background: gray; 
} 
</style> 
<script> 
function addCSSRule(key,value){ 
var css = document.styleSheets[document.styleSheets.length-1]; 
css.cssRules ? 
(css.insertRule(key+"{"+value+"}", css.cssRules.length)) : 
(css.addRule(key,value)) ; 
} 
function removeCSSRule(key){ 
for(var i = 0; i < document.styleSheets.length; i++){ 
var css = document.styleSheets[i]; 
css.cssRules ? 
(function(){ 
for(var j = 0; j < css.cssRules.length; j++){ 
if(css.cssRules[j].selectorText==key){ 
css.deleteRule(j); 
} 
} 
})() : 
(css.removeRule(key)) ; 
} 
} 
</script> 
<div id="a"> 
abc 
</div> 
<button onclick='addCSSRule("#a","color:red;background:yellow;")'> 
add</button> 
<button onclick='removeCSSRule("#a")'> 
remove</button>
Javascript 相关文章推荐
Js动态创建div
Sep 25 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
js实现星星海特效的示例
Sep 28 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 #Javascript
Javascript Tab 导航插件 (23个)
Jun 11 #Javascript
javascript 树控件 比较好用
Jun 11 #Javascript
javascript 禁止复制网页
Jun 11 #Javascript
JavaScript 动态改变图片大小
Jun 11 #Javascript
jQuery 学习 几种常用方法
Jun 11 #Javascript
javascript 冒号 使用说明
Jun 06 #Javascript
You might like
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python全栈之列表数据类型详解
2019/10/01 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
STP的判定过程
2012/10/01 面试题
省级优秀班集体申报材料
2014/05/25 职场文书
2015年副班长工作总结
2015/05/15 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏