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 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 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
摩卡咖啡
2021/03/03 咖啡文化
php中定义网站根目录的常用方法
2010/08/08 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
Noon埃及:埃及在线购物
2019/11/26 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
领导检查欢迎词
2014/01/14 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
企业宣传标语
2014/06/09 职场文书
政府四风问题整改措施
2014/10/04 职场文书
检讨书大全
2015/01/27 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书