JS 插入CSS样式的方法
方法一:存在style标签,获取此style标签,然后通过innerHTML内容插入css样式:
<style id="mystyle">
</style>
<script type="text/javascript">
var sty=document.getElementById("mystyle");
sty.innerHTML+="div{width:200px;height:200px;background:red;border:solid 2px red}";
</script>
<div>This is a div</div>
结果:
注意:style标签得在script代码前,不然会引起错误Uncaught TypeError: Cannot read property ‘innerHTML’ of null,或者使用window.onload,那就可以随便放style与script的位置也可以。
相关代码:
<script type="text/javascript">
window.onload=function(){
var sty=document.getElementById("mystyle");
sty.innerHTML+="div{width:200px;height:200px;background:red;border:solid 2px red}";
}
</script>
<style id="mystyle">
</style>
方法二:不要求页面中已经存在style标签,动态创建新的style标签。
<div id="div1">div1</div>
<div id="div2">div2</div>
JS代码:
window.onload=function(){
//方法一:
var sty=document.getElementById("mystyle");
sty.innerHTML+="#div1{width:200px;height:200px;background:red;border:solid 2px black}";
//方法二:
var insertCSS=function(cssStyle){
var style=document.createElement("style");
var theHead=document.head||document.getElementsByTagName('head')[0];
style.type="text/css";//IE需要设置
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.appendChild(document.createTextNode(cssStyle));
theHead.appendChild(style);
}
}
insertCSS("#div2{width:200px;height:200px;background:yellow;border:solid 2px black}")
}
方法二结果:
对IE来说style和script节点是特殊的节点,不允许访问其子节点,因此,IE会在添加子节点的时候报错。
style.appendChild(document.createTextNode(cssStyle));
解决IE的这个问题就是访问元素的styleSheet属性,该属性又有cssText属性,可用于接收CSS代码。在赋值CSS代码之前,IE还需要将style节点的type属性设置为“text/css”
html元素: