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数量超出限制的错误了。
原文链接:https://my.oschina.net/u/3341316/blog/856932
(资源库 www.zyku.net)
上一篇:jquery 手势密码插件
栏 目:JavaScript
本文标题:javascript 动态生成css代码的两种方法
本文地址:https://www.zyku.net/js/1283.html
您可能感兴趣的文章
- 05-11修改CSS样式实现网页变灰色/黑白代码的几个方法整理
- 08-04CSS代码实现三角形和饼图实例
- 06-15HTML/CSS:div居中和div内部元素垂直居中
- 06-10css中margin-top或者margin-bottom失效的解决方法
- 03-15Sublime Text 3的Less2Css插件介绍与安装
- 03-11Yii2 加载css、js 载入静态资源
- 03-10利用SublimeLinter 编写高质量的 JavaScript & CSS 代
- 02-27css控制文字过长裁剪后面跟着省略号
- 02-20写给喜欢用DW编写CSS人的一些建议
- 02-20Dreamweaver生成新页面css的类失效
- 03-04真我V13启用5g网络方法
- 02-14HTML5制作表格样式代码
- 01-12Time Spirit app-Time Spirit app应用
- 10-12DEDECMS 后台验证码图片不显示的多种
- 01-12软视通云会议-软视通云会议应用软件功
- 02-17iPhone手机时间设置12小时制方法
- 12-19HTML <iframe> 标签
- 03-03wordpress指定分类不输出权重集中主站
- 05-25腾讯云轻量应用服务器优惠券代金券免
- 04-18小米11pro开启全面屏手势设置方法
最近更新
阅读排行
猜你喜欢
- 02-17ASP.NET MVC页面重定向简单介绍
- 02-13用python画城市轮播地图
- 10-08一加9rt双开应用步骤介绍
- 12-28华为mate40pro开启隐私空间教程分享
- 04-22苹果11录屏添加到控制中心设置方法
- 02-04小米11禁用锁屏后断开数据功能
- 05-05IE11浏览器下测试IE10、IE9、IE8、IE7
- 01-11Mix壁纸-Mix壁纸应用软件功能介绍
- 11-30帝国CMS修改TAG列表分页数量的方法
- 02-22真我gt设置字体大小方法