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 相关文章推荐
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vue router 配置路由的方法
Jul 26 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python实现的防DDoS脚本
2011/02/08 Python
python列表去重的二种方法
2014/02/14 Python
Python生成验证码实例
2014/08/21 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
Java servlet面试题
2012/03/04 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
网络宣传方案
2014/03/15 职场文书
三八活动策划方案
2014/08/17 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书