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 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
mocha的时序规则讲解
Feb 16 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 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 表单验证实现代码
2009/03/10 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP类的反射用法实例
2014/11/03 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python绘制随机网络图形示例
2019/11/21 Python
python爬取抖音视频的实例分析
2021/01/19 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
工程款申请报告
2015/05/15 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
干部考核工作总结
2015/08/12 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers