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

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数量超出限制的错误了。

总结：以上方法可以解决很多问题，有什么不懂的找我！

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

赞 (0)

相关推荐

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

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

  • Javascript动态引用CSS文件的2种方法介绍

    最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用

  • javascript密码强度校验代码（两种方法）

    javascript密码强度校验代码（两种方法）

    先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur

  • PHP使用imagick读取PDF生成png缩略图的两种方法

    一.ImageMagick是什么ImageMagick是一套功能强大.稳定而且免费的工具集和开发包,可以用来读.写和处理超过185种基本格式的图片文件,包括流行的TIFF, JPEG, GIF, PNG, PDF以及PhotoCD等格式.利用ImageMagick,你可以根据web应用程序的需要动态生成图片, 还可以对一个(或一组)图片进行改变大小.旋转.锐化.减色或增加特效等操作,并将操作的结果以相同格式或其它格式保存.二.php_imagick什么一个可以供PHP调用ImageMagick功

  • 动态加载jQuery的两种方法实例分析

    本文实例讲述了动态加载jQuery的两种方法.分享给大家供大家参考.具体如下: 第一种方法参考本站之前有人发的代码,增加了加载检测: 第二种方法来自去年的12306刷票脚本. 第一种方法: function withjQuery(callback) { if(!(window.jQuery)) { var js = document.createElement('script'); js.setAttribute('src', 'https://dynamic.12306.cn/otsweb/j

  • JavaScript判断数组重复内容的两种方法(推荐)

    JavaScript判断数组重复内容的两种方法(推荐)

    前言 一般,我们可能会给数组去重,这个操作并不复杂,执行一个循环就是了.现在,我要做的是,判断数组中是否有重复的内容,如果有,返回 true 否则,返回 false. 思路 把数组变成字符串 循环原数组,拿每一个字段和这个字符串进行比对,看是否有重复 如何拿A字符串和B字符串进行对比,并且要求判断出B字符串中包含过个A字符串呢? 方法一 indexOf() 和 lastIndexOf() 对比法. 首先,我们构建代码: var arr = ["aa","bb",&q

  • python生成requirements.txt的两种方法

    python项目如何在另一个环境上重新构建项目所需要的运行环境依赖包? 使用的时候边记载是个很麻烦的事情,总会出现遗漏的包的问题,这个时候手动安装也很麻烦,不能确定代码报错的需要安装的包是什么版本.这些问题,requirements.txt都可以解决! 生成requirements.txt,有两种方式: 第一种 适用于 单虚拟环境的情况: : pip freeze > requirements.txt 为什么只适用于单虚拟环境?因为这种方式,会将环境中的依赖包全都加入,如果使用的全局环境,则下载

  • Java动态验证码单线设计的两种方法

    1.java的动态验证码我这里将介绍两种方法: 一:根据java本身提供的一种验证码的写法,这种呢只限于大家了解就可以了,因为java自带的模式编写的在实际开发中是没有意义的,所以只供学习一下就可以了,待会讲解的第二种呢就是我们需要掌握的一种模式了: 第一种的代码如下: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import

  • springboot验证码的生成与验证的两种方法

    springboot验证码的生成与验证的两种方法

    目录 前言 效果一览(单击图片刷新验证码) 一.使用整合kaptcha方式实现验证码生成与验证 二.使用hutool-captcha方式实现验证码生成与验证 前言 在springboot的登陆页面中为了防止机器大规模注册,机器暴力破解数据密码等危害,需要验证随机生成的验证码.现提出两种简易方案生成验证码功能,一种采用springboot整合kaptcha第三方验证码生成工具的生成方案:另一种采用springboot整合第三方类库hutool生成验证码,验证成功跳转至success页面,失败则跳转

  • 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = request("type") function request() { var query = location.search; var paras = arguments[0]; if (arguments.length == 2) { query = arguments[1]; }

随机推荐