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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
详解vue更改头像功能实现
Apr 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下escape解码函数的实现方法
2010/08/08 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
应聘护士自荐信
2013/10/21 职场文书
大学生自我鉴定
2013/12/08 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
2015年推普周活动总结
2015/03/27 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript