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实现的网页局布刷新效果
Dec 01 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
使用URL传输SESSION信息
2015/07/14 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
如何用JQuery进行表单验证
2013/05/29 面试题
高中的职业生涯规划书
2013/12/28 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
小学生新年寄语
2014/04/03 职场文书
学校督导评估方案
2014/06/10 职场文书
经典演讲稿开场白
2014/08/25 职场文书
承诺书模板
2014/08/30 职场文书
法定代表人证明书
2014/11/28 职场文书
刮痧观后感
2015/06/05 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python