Css样式表的动态更新问题(Css+js+dom的统一性)?
目的:
原来写的脚本只包括js逻辑和dom结构,css是分离写在页面中的,现在想把对控件的Css定义也放到脚本里,动态输出,这样统一起来不会乱了
html:
<style type= "text/css ">
.a{xxxx}
.b{xxxx}
</style>
现在有个无效的脚本方法
function addStyle()
{
var newStyle= '.lala{color:red;} ';
var e=document.getElementsByTagName( 'style ');
var etxt=document.createTextNode(newStyle);
e[0].appendChild(etxt);
}
onload= 'addStyle() ';
这个方法是想把新定义的样式 '放到 '页面中,达到这样的效果
html:
<style type= "text/css ">
.a{xxxx}
.b{xxxx}
.lala{color:red;}
</style>
但是这个函数无法工作,用同样原理却可以把样式内容添加到 <div> 中
这个函数无法工作的原因是由于浏览器限制写入内容到 <style> 标签么?
有没有办法可以动态更新 <style> 样式?不是动态导入css文件
看到过一个方法
document.write( " <style type= 'text/css '> ");
document.write(newStyle);
document.write( " </style> ");
直接写入页面一个样式表,但是使用的时候,页面一片空白,浏览器进度条一直在读取,没反应,是不是那里需要改进一下?
================
分不太多了~~凑活吧
------解决方案--------------------lz这样试试
<script language= "javascript ">
function addStyle()
{
var newStyle= ' <style> \r\n\
p {color:red;}\r\n\
</style> ';
document.write(newStyle);
}
addStyle();
</script>