如何动态加载JavaScript和Css?

一、动态加载javascript方法

<script type="text/javascript">
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:#f00;}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
</script>

另一种指定javascript代码的方式是行内方式，IE中将script视为一个特殊元素，不允许DOM访问其子节点。可以使用text属性来指定。

通用方式：

<script type="text/javascript">
function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try{
        script.appendChild(document.createTextNode(code))
    }catch(ex){
        script.text = code;
    }
    document.body.appendChild(script);
}
loadScriptString("function say(){alert('hello')} say();")
</script>

二、动态加载CSS方法

<script type="text/javascript">
function loadStyle(url){
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
loadStyle("css.css");
</script>

另一种定义样式的方式是使用style元素来包含嵌入式css，IE需要使用cssText属性，其他浏览器通过标准的DOM方式即可。

通用方法

<script type="text/javascript">
function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css))
    }catch(ex){
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}
loadStyleString("body{background-color:#f00;}")
</script>