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 相关文章推荐
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
js 轮播效果实例分享
Dec 28 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
Vue中fragment.js使用方法小结
Feb 17 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中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python正则表达式知识汇总
2017/09/22 Python
selenium+python实现自动登录脚本
2018/04/22 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
工程班组长岗位职责
2013/12/30 职场文书
房产买卖委托公证书
2014/04/04 职场文书
暑期社会实践证明书
2014/11/17 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python