手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js 操作css实现代码
js 操作css实现代码
摘要:当我们需要的是一条规则的时候,总不能在每次dom发生变化的时候去执行这个操作,否则也太效率低下了。好在dom中cssrules也是可以修改的...

当我们需要的是一条规则的时候,总不能在每次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>

【js 操作css实现代码】相关文章:

js操作css属性实现div层展开关闭效果的方法

javascript实现树形菜单的方法

JavaScript实现身份证验证代码

javascript实现链接单选效果

如何实现浏览器上的右键菜单

一段实时更新的时间代码

原生javascript实现解析XML文档与字符串

Node.js实现JS文件合并小工具

Js和JQuery获取鼠标指针坐标的实现代码分享

javascript模拟评分控件实现方法

精品推荐
分类导航