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

 更新时间:2016年10月11日 09:28:41   投稿:jingxian  
下面小编就为大家带来一篇javascript 动态样式添加的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

异步加载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 动态样式添加的简单实现全部内容了,希望大家多多支持脚本之家~

相关文章

  • js css自定义分页效果

    js css自定义分页效果

    这篇文章主要为大家详细介绍了js css自定义分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js实现多张图片每隔一秒切换一张图片

    js实现多张图片每隔一秒切换一张图片

    这篇文章主要为大家详细介绍了js实现多张图片每隔一秒切换一张图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JS实现图片居中悬浮效果

    JS实现图片居中悬浮效果

    这篇文章给大家分享的是通过JS实现图片垂直居中悬浮,不跟随滚动条飘动的效果,有兴趣的朋友跟着学习下吧。
    2017-12-12
  • IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

    IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

    最近有个需求须要实现左右拖拽功能,页面右边是个iframe页面,在chrome测试通过之后,发现在ie8上面效果不是很理想,查阅相关资料找到可以使用ie自带的setCapture和releaseCapture来解决,需要的朋友可以参考下
    2016-10-10
  • 如何在TypeScript中使用函数

    如何在TypeScript中使用函数

    这篇文章主要为大家介绍了如何在TypeScript中使用函数实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • JS事件流与事件处理程序实例分析

    JS事件流与事件处理程序实例分析

    这篇文章主要介绍了JS事件流与事件处理程序,结合实例形式分析了事件流与事件处理程序相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2019-08-08
  • 原生js实现简单滑动解锁功能 js实现滑动拼图解锁

    原生js实现简单滑动解锁功能 js实现滑动拼图解锁

    这篇文章主要为大家详细介绍了原生js实现简单滑动解锁功能,js实现滑动拼图解锁,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • js实现仿qq消息的弹出窗效果

    js实现仿qq消息的弹出窗效果

    这篇文章主要介绍了js实现仿qq消息的弹出窗效果,文章代码实现模拟qq弹出框消息提醒,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • Bootstrap如何激活导航状态

    Bootstrap如何激活导航状态

    这篇文章主要为大家详细介绍了Bootstrap如何激活导航状态,包括胶囊式导航中的激活状态和列表导航中的激活状态,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Javascript获取随机数的实现方法

    Javascript获取随机数的实现方法

    下面小编就为大家带来一篇Javascript获取随机数的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论