日期:2014-05-16  浏览次数:20362 次

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>