js 操作css实现代码
更新时间：2009年06月11日 22:16:16 作者：
虽说jquery支持css选择器，可以把一些css规则放在js里，js无论如何是比css灵活的。但是js修改的是dom的htmlelement的stlye，是一个操作而非规则。
当我们需要的是一条规则的时候，总不能在每次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>
好在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>
相关文章
这篇文章主要介绍了小程序云开发 数据库自动备份实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要为大家介绍了微信小程序登录会话密钥session失效解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要为大家详细介绍了纯js实现图片匀速淡入淡出效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了微信小程序单列下拉菜单，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了JS实现网页标题栏显示当前时间和日期的方法,涉及JavaScript日期时间函数及网页标题栏操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
这篇文章主要为大家详细介绍了js实现简单扫雷，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
JavaScript使用Promise封装Axios进行高效开发
这篇文章主要介绍了JavaScript使用Promise封装Axios进行高效开发，Axios是一个基于Promise的HTTP库，它可以帮助我们更方便地发起HTTP请求，并且提供了许多高级功能，感兴趣的同学可以参考下文2023-05-05
这篇文章主要为大家详细介绍了JavaScript canvas实现环形渐变进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了dts文件中删除一个node或属性的操作方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了通过IntersectionObserver实现懒加载，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
最新评论