JS 插⼊CSS 样式的⽅法
JS 插⼊CSS 样式的⽅法
⽅法⼀：存在style标签，获取此style标签，然后通过innerHTML内容插⼊css样式：
结果：
注意：style标签得在script代码前，不然会引起错误Uncaught TypeError: Cannot read property ‘innerHTML’ of null，或者使⽤load，那就可以随便放style与script的位置也可以。
相关代码：
⽅法⼆：不要求页⾯中已经存在style标签，动态创建新的style标签。JS代码：
<style  id ="mystyle">
</style >
<script  type ="text/javascript">
var  ElementById("mystyle");
sty.innerHTML+="div{width:200px;height:200px;background:red;border:solid 2px red}";
</script >
<div >This is a div </div >
<script  type ="text/javascript">
var  ElementById("mystyle");
sty.innerHTML+="div{width:200px;height:200px;background:red;border:solid 2px red}";
}
</script >
<style  id ="mystyle">
</style >
<div  id ="div1">div1</div >
<div  id ="div2">div2</div >
//⽅法⼀：
var ElementById("mystyle");
sty.innerHTML+="#div1{width:200px;height:200px;background:red;border:solid 2px black}";
//⽅法⼆：
var insertCSS=function(cssStyle){
var ateElement("style");
var theHead=document.head||ElementsByTagName('head')[0];
if(style.styleSheet){  //IE
var ieInsertCSS=function(){
try{
style.styleSheet.cssText=cssStyle;
}catch(e){
}
};
//若当前styleSheet不能使⽤，则放到异步中
if(style.styleSheet.disable){
setTimeout(ieInsertCSS,10);
} else{
ieInsertCSS();
}
} else{ //W3c浏览器
style.ateTextNode(cssStyle));
theHead.appendChild(style);
}
}css怎么创建
insertCSS("#div2{width:200px;height:200px;background:yellow;border:solid 2px black}")
}
⽅法⼆结果：
对IE来说style和script节点是特殊的节点，不允许访问其⼦节点，因此，IE会在添加⼦节点的时候报错。
style.ateTextNode(cssStyle));
解决IE的这个问题就是访问元素的styleSheet属性，该属性⼜有cssText属性，可⽤于接收CSS代码。在赋值CSS代码之前，IE还需要将style节点的type属性设置为“text/css”
html元素：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。