javascript 动态生成css代码的两种方法


Posted in Javascript onMarch 17, 2017

javascript 动态生成css代码的两种方法

有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中。但有些兼容性问题我们需要解决。首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决。还需要注意的就是在有些版本IE中一个页面上style标签数量是有限制的,如果超过了会报错,需要考虑这点。

方法1:

给<style id="css">标签添加一个id名,在<script>标签中写

var oCss=document.getElementById("css");

oCss.innerHTML+="#box{width:200px;}";

这样就可以加上样式了。

方法2:

有时候我们需要利用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数量超出限制的错误了。

总结:以上方法可以解决很多问题,有什么不懂的找我!

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
js 省地市级联选择
Feb 07 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
Vue动态获取width的方法
Aug 22 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
AngularJS中$http使用的简单介绍
Mar 17 #Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 #Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 #Javascript
Bootstrap表格制作代码
Mar 17 #Javascript
鼠标经过出现气泡框的简单实例
Mar 17 #Javascript
angularJS之$http:与服务器交互示例
Mar 17 #Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 #Javascript
You might like
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
JS字符串函数扩展代码
2011/09/13 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
js style动态设置table高度
2014/10/21 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
python类定义的讲解
2013/11/01 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
详解Python 解压缩文件
2019/04/09 Python
django框架创建应用操作示例
2019/09/26 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
介绍一下#error预处理
2015/09/25 面试题
几个SQL的面试题
2014/03/08 面试题
自荐信的格式
2014/03/10 职场文书
四风问题对照检查材料
2014/09/22 职场文书
学生保证书格式
2015/02/27 职场文书
会议主持词结束语
2015/07/03 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python