原理解析:
第一步:使用dom创建<script type="text/javascript"> 或者 <link>标签,并给他们附加属性,如type等
第二步:使用appendChild方法把标签绑定到另一个标签,一般是绑到<head>.
应用:
1、提高代码的复用,减 少代码量;
2、添加一个javascript控制器和 session可以实现动态改变页面样式;
3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性
DEMO 一 HTML页面 jsforjscss.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="loadjscssfile.js"></script> <title>无标题文档</title> </head> <body> </body> </html>
二 动态加载js文件的程序 loadjscssfile.js
// JavaScript Document function loadjscssfile(filename, filetype) { if (filetype == "js") { var fileref = document.createElement('script'); fileref.setAttribute("type", "text/javascript"); fileref.setAttribute("src", filename); } else if (filetype == "css") { var fileref = document.createElement('link'); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename); } if (typeof fileref != "undefined") { document.getElementsByTagName("head")[0].appendChild(fileref); } } loadjscssfile("do.js", "js"); loadjscssfile("test.css", "css");
三 被加载的 js文件:
do.alert("this is do");
四 被加载的 css文件:test.css (css文件中还可以用@import url("menu.css"); 引进其他css文件)
@charset "utf-8"; @import url("menu.css"); @import url("../gundong.css"); body{ background-color:gray; }