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 相关文章推荐
基于jquery的回到页面顶部按钮
Jun 27 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
表单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
星际争霸秘籍
2020/03/04 星际争霸
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
php创建多级目录代码
2008/06/05 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
js 单引号 传递方法
2009/06/22 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
django中模板的html自动转意方法
2018/05/27 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
如何提高JDBC的性能
2013/04/30 面试题
30年同学聚会邀请函
2014/01/25 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
关于感谢信的范文
2015/01/23 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
学习雷锋主题班会
2015/08/14 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang