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 Tab 导航插件 (23个)
Jun 11 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
Vue渲染过程浅析
Mar 14 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
PHP 高手之路(一)
2006/10/09 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP中“=&gt;
2019/03/01 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
谈谈python中GUI的选择
2018/03/01 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
道路施工安全责任书
2014/07/24 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫