CSS教程之静态加载内部CSS与JS文件
目前我们的站就是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").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").appendChild(fileref)
}
loadjscssfile("myscript.js","js")//翻开页面时扫瞄器静态的加载文件
loadjscssfile("javascript.php","js")//翻开页面时扫瞄器静态的加载"javascript.php",
loadjscssfile("mystyle.css","css")//翻开页面时扫瞄器静态的加载.css文件
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 学Dreamweaver技术的过程其实是一个增加信心的过程。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。 俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。 所见则所得网页编辑器的优点就是直观性,使用方便,容易上手. HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
页:
[1]