使用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 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
Web应用开发TypeScript使用详解
May 25 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批量生成缩略图的代码
2008/07/19 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php xhprof使用实例详解
2019/04/15 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python3判断IP地址的方法
2021/03/04 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
技校教师求职简历的自我评价
2013/10/20 职场文书
30岁生日感言
2014/01/25 职场文书
班级学习计划书
2014/04/27 职场文书
园林技术专业求职信
2014/07/28 职场文书
公司授权委托书
2014/10/17 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书