动态加载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>