javascript 动态生成css代码的两种方法
更新时间：2017年03月17日 10:46:47 作者：源子姗
这篇文章主要介绍了javascript 动态生成css代码的两种方法，有时候我们需要利用js来动态生成页面上style标签中的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数量超出限制的错误了。
总结：以上方法可以解决很多问题，有什么不懂的找我！
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
在现代 Web 应用程序中,实现高效的搜索功能是至关重要的,Fuse.js 是一个强大的 JavaScript 库,它提供了灵活的模糊搜索和文本匹配功能,使您能够轻松实现出色的搜索体验,文中代码示例讲解的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了JS实现经典的中国地区三级联动下拉菜单功能,结合完整实例形式分析了javascript基于事件响应实现页面元素动态变换的相关操作技巧,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了javascript修改图片src的方法,通过简单的图片src获取与赋值来实现修改src的功能,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了如何使用JavaScript和WebSpeechAPI快速实现一个简单的文本转语音Web应用,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了JS 设置Cookie 有效期 检测cookie的相关资料,需要的朋友可以参考下2017-06-06
本篇文章主要介绍了webpack4的迁移的使用方法，主要介绍了如何从webpack1.x升级到4.x，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
Mapbox是一个可以免费创建并定制个性化地图的网站。这篇文章主要介绍了mapboxgl区划标签避让不遮盖实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
这篇文章主要是对JS+DIV实现鼠标划过切换层效果的实例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
下面小编就为大家带来一篇js中遍历对象的属性和值的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了使用eslint和githooks统一前端风格,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
最新评论