JavaScript新增样式规则(推荐)


Posted in Javascript onJuly 19, 2016

关键代码如下所示:

<html>
<head>

<link rel="stylesheet" type="text/css" href="basic.css">


<script>



window.onload=function(){





 var sheet=document.styleSheets[0];





 //【新增样式规则】





// sheet.insertRule('.div1{font-size:16px;color:red;}',0);

 IE8及以上不支持
//第一个参数是样式,第二个是样式的位置




  // sheet.addRule('.div1','font-size:20px;color:orange;font-weight:bold;',0);

//IE都支持

//第一个参数是样式名,第二个样式位置是样式规则,第三个是样式位置





 function insertCss(element,csName,position){











//跨浏览器兼容









 if(sheet.insertRule){









 // sheet.insertRule 非IE的时候会读取到一个函数,IE8即以上的时候会读取到undefined






sheet.insertRule(element+'{'+csName+'}',position);







}else if(sheet.addRule){

















sheet.addRule(element,csName,position);





}


}




insertCss('.div1','font-size:16px;color:orange',0);




 //【删除样式规则】




//sheet.deleteRule(position) ; //删除样式 参数为位置



//IE8及以上不支持




//sheet.removeRule(position) ; //删除样式 参数为位置



//IE支持




function deleteCss(position){



//跨浏览器兼容




if(sheet.deleteRule){









 sheet.deleteRule(position);



}else if(sheet.removeRule){





sheet.removeRule(position);



}



deleteCss(0);


}





}


</script>

</head>

<body></body>
</html>

以上所述是小编给大家介绍的JavaScript新增样式规则(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
JS中跳出循环的示例代码
Sep 14 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
JavaScript动态添加css样式和script标签
Jul 19 #Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 #Javascript
js基于cookie记录来宾姓名的方法
Jul 19 #Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 #Javascript
使用plupload自定义参数实现多文件上传
Jul 19 #Javascript
artDialog+plupload实现多文件上传
Jul 19 #Javascript
plupload+artdialog实现多平台上传文件
Jul 19 #Javascript
You might like
php抓即时股票信息
2006/10/09 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
php中Snoopy类用法实例
2015/06/19 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
python多进程实现进程间通信实例
2017/11/24 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Django框架models使用group by详解
2020/03/11 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
高中数学教师求职信
2013/10/30 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
有关环保的标语
2014/06/13 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
政工例会汇报材料
2014/08/26 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
电影雷锋观后感
2015/06/10 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书