动态样式

Posted 2020-08-09

js可以动态的向html页面中添加样式

 动态样式必须添加在head标签当中才能被正确的解析和执行

1 添加外部样式

var link=document.createElement("link");

link.type="type/css"

link.rel="stylesheet"

link.href="a.css"

document.head.appendChild(link)

2 添加内部样式(非IE)

var style=document.createElement("style");

style.text="text/css";

style.appendChild(document.createTextNode("body:{background-color:red;}");//直接向style中写内容

document.appendChild(style);

3 添加内部样式(IE)

var style=document.createElement("style");

style.text="text/css";

style.styleSheet.cssText="body:{background-color:red;}";//直接向style中写内容

document.appendChild(style);

4 兼容所有浏览器的写法

var code="body:{background-color:red;}"；

var style=document.createElement("style");

style.text="text/css";

try

{

style.appendChild(document.createTextNode(code);

}

catch(ex)

{

style.styleSheet.cssText=code;

}