javascript 动态样式添加的简单实现


Posted in Javascript onOctober 11, 2016

异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程

1.createLink方法用于创建一个style标签并添加到head标签中

2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容。

<button id="demo">css文件</button>
  <button id="demo1">css模块</button>
  <script type="text/javascript">
    //异步加载css文件,支持所有浏览器
    document.getElementById("demo").onclick = function () {
      createLink("../../css/demo.css");
    }

    function createLink(src) {
      var link = document.createElement("link");
      link.rel = "stylesheet"
      link.type = "text/css";
      link.href = src;
      document.getElementsByTagName("head")[0].appendChild(link);
    }


    //IE将<style>视为一个特殊的与<script>类似的节点,不允许其访问子节点,事实上,IE此时抛出的错误与向<script>元素添加子节点时抛出的错误相同,
    //解决IE中的这个问题的办法就是访问元素的styleSheet属性,该属性又有一个CSSText属性,可以接受css代码
    document.getElementById("demo1").onclick = function () {
      createModule("body{background:green;}");
    }

    function createModule(css) {
      var style = document.createElement("style");
      style.type = "text/css";
      try {
        style.appendChild(document.createTextNode(css));
      } catch (ex) {
        style.styleSheet.cssText = css;
      }
      document.getElementsByTagName("head")[0].appendChild(style);
    }
  </script>

以上就是小编为大家带来的javascript 动态样式添加的简单实现全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 #Javascript
javascript 动态脚本添加的简单方法
Oct 11 #Javascript
js HTML5上传示例代码完整版
Oct 10 #Javascript
JavaScript  event对象整理及详细介绍
Oct 10 #Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 #Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 #Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 #Javascript
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python内置函数的用法实例教程
2014/09/08 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python应用库大全总结
2018/05/30 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
Python日期时间Time模块实例详解
2019/04/15 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
pygame实现弹球游戏
2020/04/14 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
军训自我鉴定范文
2014/02/13 职场文书
2014年情人节活动方案
2014/02/16 职场文书
法人委托书范本
2014/09/15 职场文书
销售人才自我评价范文
2014/09/27 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
Vue h函数的使用详解
2022/02/18 Vue.js