使用javascript插入样式


Posted in Javascript onMarch 14, 2016

一、用javascript插入<style>样式
有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中。

但有些兼容性问题我们需要解决。首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决。

还需要注意的就是在有些版本IE中一个页面上style标签数量是有限制的,如果超过了会报错,需要考虑这点。

function addCSS(cssText){
 var style = document.createElement('style'), //创建一个style元素
  head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
 style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
 if(style.styleSheet){ //IE
  var func = function(){
   try{ //防止IE中stylesheet数量超过限制而发生错误
    style.styleSheet.cssText = cssText;
   }catch(e){

   }
  }
  //如果当前styleSheet还不能用,则放到异步中则行
  if(style.styleSheet.disabled){
   setTimeout(func,10);
  }else{
   func();
  }
 }else{ //w3c
  //w3c浏览器中只要创建文本节点插入到style元素中就行了
  var textNode = document.createTextNode(cssText);
  style.appendChild(textNode);
 }
 head.appendChild(style); //把创建的style元素插入到head中 
}

//使用
addCSS('#demo{ height: 30px; background:#f00;}');

当然这只是一个最基本的演示方法,实际运用中还需进行完善,比如把每次生成的css代码都插入到一个style元素中,这样在IE中就不会发生stylesheet数量超出限制的错误了。

封装:

var importStyle=function importStyle(b){var a=document.createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild(c.createTextNode(b))}};

importStyle('h1 { background: red; }');//调用

seajs封装

seajs.importStyle=function importStyle(b){var a=document.createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild(c.createTextNode(b))}};

二、javascript插入<link>样式
在<head>中使用<link>标签引入一个外部样式文件,这个比较简单,各个主流浏览器也不存在兼容性问题:
function includeLinkStyle(url) {
var link = document.createElement(“link”);
link.rel = “stylesheet”;
link.type = “text/css”;
link.href = url;
document.getElementsByTagName(“head”)[0].appendChild(link);
}

includeLinkStyle(“http://css.xxx.com/home/css/reset.css?v=20101227”);

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
实例解析Array和String方法
Dec 14 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 #Javascript
javascript实现数组去重的多种方法
Mar 14 #Javascript
javascript实现PC网页里的拖拽效果
Mar 14 #Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 #Javascript
node模块机制与异步处理详解
Mar 13 #Javascript
JS中创建函数的三种方式及区别
Mar 13 #Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 #Javascript
You might like
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
php数据序列化测试实例详解
2017/08/12 PHP
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
pandas中去除指定字符的实例
2018/05/18 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
校园活动策划书范文
2014/01/10 职场文书
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
材料物理专业求职信
2014/09/01 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
新生入学欢迎词
2015/01/26 职场文书
导游词怎么写
2015/02/04 职场文书
校车安全管理责任书
2015/05/11 职场文书
2016年国培研修日志
2015/11/13 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang