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 相关文章推荐
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 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 5.0创建图形的巧妙方法
2010/10/12 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python实现音乐下载器
2018/04/15 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Python Merge函数原理及用法解析
2020/09/16 Python
python实现无边框进度条的实例代码
2020/12/30 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
六十岁生日答谢词
2014/01/10 职场文书
捐款活动总结
2014/08/27 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
八年级英语教学反思
2016/02/15 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS