|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
静态加载内部CSS与JS文件利用dom创立<script>大概<link>标签,并给他们附加属性,如type等。然后利用appendChild办法把标签绑定到另外一个标签,通常为绑到<head>。
使用:
1、进步代码的复用,削减代码量;
2、增加一个javascript把持器和session能够完成静态改动页面款式;
3、因为是页面是从上到下顺次加载文件的,而且边加载边注释,以是能够增加javascript把持器把持页面文件的加载按次,如先加载css结构文件,再显现有图片的css丑化文件,以后再加载年夜的falsh文件,大概安内容的主要性来加载。
Toloada.jsor.cssfiledynamically,inanutshell,itmeansusingDOMmethodstofirstcreateaswankynew"script"or"LINK"element,assignittheappropriateattributes,andfinally,useelement.appendChild()toaddtheelementtothedesiredlocationwithinthedocumenttree.Itsoundsalotmorefancythanitreallyis.Letsseehowitallcomestogether:
接上去的事情是绑定到<head>标签。绑定的时分有一个成绩就是统一个文件有大概被我们绑定两次,绑定两次扫瞄器也不会呈现非常,可是效力就低了。为了不
这类情形我们能够新增一个全局数组变量,把绑定的文件名字保留在内里,每次绑定前先反省一下是不是已存在,假如存在就提醒已存在,假如不存在就绑定。
document.getElementsByTagName("head")[0].appendChild(fileref)
ByreferencingtheHEADelementofthepagefirstandthencallingappendChild(),thismeansthenewlycreatedelementisaddedtotheveryendoftheHEADtag.Furthermore,youshouldbeawarethatnoexistingelementisharmedintheaddingofthenewelement-thatistosay,ifyoucallloadjscssfile("myscript.js","js")twice,younowendupwithtwonew"script"elementsbothpointingtothesameJavascriptfile.Thisisproblematiconlyfromanefficiencystandpoint,asyoullbeaddingredundantelementstothepageandusingunnecessarybrowsermemoryintheprocess.Asimplewaytopreventthesamefilefrombeingaddedmorethanonceistokeeptrackofthefilesaddedbyloadjscssfile(),andonlyloadafileifitsnew:
varfilesadded=""//保留已绑定文件名字的数组变量
functioncheckloadjscssfile(filename,filetype){
if(filesadded.indexOf("["+filename+"]")==-1){//indexOf判别数组里是不是有某一项
loadjscssfile(filename,filetype)
filesadded+="["+filename+"]"//把文件名字增加到filesadded
}
else
alert("filealreadyadded!")//假如已存在就提醒
}
checkloadjscssfile("myscript.js","js")//success
checkloadjscssfile("myscript.js","js")//redundantfile,sofilenotadded
HereImjustcrudelydetectingtoseeifafilethatssettobeaddedalreadyexistswithinalistofaddedfilesnamesstoredinvariablefilesaddedbeforedecidingwhethertoproceedornot.
Ok,movingon,sometimesthesituationmayrequirethatyouactuallyremoveorreplaceanadded.jsor.cssfile.Letsseehowthatsdonenext.
functionloadjscssfile(filename,filetype){
if(filetype=="js"){//判别文件范例
varfileref=document.createElement(script)//创立标签
fileref.setAttribute("type","text/javascript")//界说属性type的值为text/javascript
fileref.setAttribute("src",filename)//文件的地点
}
elseif(filetype=="css"){//判别文件范例
varfileref=document.createElement("link")
fileref.setAttribute("rel","stylesheet")
fileref.setAttribute("type","text/css")
fileref.setAttribute("href",filename)
}
if(typeoffileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js","js")//翻开页面时扫瞄器静态的加载文件
loadjscssfile("javascript.php","js")//翻开页面时扫瞄器静态的加载"javascript.php",
loadjscssfile("mystyle.css","css")//翻开页面时扫瞄器静态的加载.css文件
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 |
|