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关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php使用ereg验证文件上传的方法
2014/12/16 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
Angular实现form自动布局
2016/01/28 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
python中self原理实例分析
2015/04/30 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
keras:model.compile损失函数的用法
2020/07/01 Python
如何完美的建立一个python项目
2020/10/09 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
宣传策划类求职信范文
2014/01/31 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
安全责任书
2015/01/29 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
Nginx速查手册及常见问题
2022/04/07 Servers