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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python语法快速入门指南
2015/10/12 Python
Python常用库推荐
2016/12/04 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python sorted函数原理解析及练习
2020/02/10 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
采用怎样的方法保证数据的完整性
2013/12/02 面试题
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
大学生毕业自我鉴定范文
2013/11/03 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
中班开学寄语
2014/04/04 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers
从原生JavaScript到React深入理解
2022/07/23 Javascript