DOM操作技术之动态添加script和样式
向页⾯中添加JavaScript代码，⼀种⽅式是引⽤外在⽂件，另⼀种是使⽤script标签嵌⼊JavaScript代码，我们⼀般使⽤的是引⽤外在⽂
件，但是只有当页⾯中的所有外在⽂件都加载和解析完毕后，页⾯才算完全加载完毕并且显⽰，页⾯显⽰会产⽣延时。我们想能不能页⾯加
载时不去加载和解析外在⽂件，当要引⽤外在⽂件的时候再加载和解析，这⾥就⽤到了动态添加脚本：
//直接引⽤外部js⽂件
<script type="text/javascript" src="test.js"></script>
//动态加载js⽂件，把它封装在函数⾥
function loadScript(url) {
var script = ateElement("script");
script.src = url;
document.body.appendChild(script);
}
loadScript("test.js");
//另外⼀种⽅式是在script标签⾥⾯嵌⼊代码
//⼀般的⽅式
<script type="text/javascript">
function sayHello() {
alert("Hello.");
}
</script>
/
/等价于
var script = ateElement("script");
script.appendChild(
document.body.appendChild(script);
//上⾯这段代码在IE中会抛出错误，IE将<script>视为⼀个特殊的元素，不允许DOM访问其⼦节点，不过可以使⽤<script>元素的text属性指定js代码，完整代码如下
function loadScriptString(code) {
javascript动态效果
var script = ateElement("script");
try {
script.ateTextNode(code));
} catch(ex) {
< = code;
}
document.body.appendChild(script);
}
loadScriptString("function sayHello(){alert('Hello.');}");
动态样式也类型：
//⼀般引⽤css外部⽂件
<link rel="stylesheet" type="text/css" href="test.css"></link>
//动态加载，封装在函数内
function loadStyle(url) {
var link = ateElement("link");
link.href = url;
var head = ElementTagName("head")[0];
head.appendChild(link);
}
loadStyle("test.css");
//另⼀种⽅式是在<style>内嵌⼊css，如：
<style type="text/css">
body {
background-color: red;
}
</style>
//等价于
var style = ateElement("style");
style.appendChild(
var head = ElementTagName("head")[0];
head.appendChild(style);
/
/同理，由于IE中会报错，将<style>视为⼀个特殊的、与<script>类似的节点，不允许访问其⼦节点。不过可以使⽤style元素的styleSheet.cssText属性添加css代function loadStyleString(css) {
var style = ateElement("style");
try {
style.ateTextNode(css));
} catch(ex) {
style.styleSheet.cssText = css
}
var head = ElementTagName("head")[0];
head.appendChild(style);
}
loadStyleString("body{background-color:red}");

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