使用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 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
使用javascript获取页面名称
Dec 23 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
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时间戳转换的示例
2014/03/31 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python的range和linspace使用详解
2019/11/27 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Redis RDB技术底层原理详解
2021/09/04 Redis