来谈谈：cookie和dom操纵挪用款式表完成网页换肤
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性道理:经由过程存取cookie和dom操纵挪用分歧的款式表文件来完成前台换肤.
换肤示例下载：sour.rar
Html代码部分:
1.要有一个带id的款式表链接,我们要经由过程操纵这个链接来挪用分歧的href.
<linkhref="css/main0.css"rel="stylesheet"type="text/css"id="cssfile"/>
2.皮肤选择按钮(背景为每一个li增加onclick事务,触发换肤功效)
<ulid="skin">
<liid="skin_0"title="灰色">灰色</li>
<liid="skin_1"title="绿色">绿色</li>
<liid="skin_2"title="黄色">黄色</li>
<liid="skin_3"title="蓝色">蓝色</li>
<liid="skin_4"title="粉色">粉色</li>
<liid="skin_5"title="紫色">紫色</li>
</ul>
Js部分:
1.换肤办法
//设置cookie,按钮选中形态,页面皮肤
skin.setSkin=function(n){
varskins=$("skin").getElementsByTagName("li");
for(i=0;i<skins.length;i++)
{
skins.className="";//初始化按钮形态
}
skin.setCookie(n);//保留以后款式
$("skin_"+n).className="selected";//设置选中皮肤按钮的款式
$("cssfile").href="css/main"+n+".css";//设置页面款式
}
2.存取cookie
//将以后皮肤n存到cookie
skin.setCookie=function(n){
varexpires=newDate();
expires.setTime(expires.getTime()+24*60*60*365*1000);
varflag="Skin_Cookie="+n;
document.cookie=flag+";expires="+expires.toGMTString();
}
//前往用户设置的皮肤款式
skin.readCookie=function(){
varskin=0;
varmycookie=document.cookie;
varname="Skin_Cookie";
varstart1=mycookie.indexOf(name+"=");
if(start1==-1){
skin=0;//假如没有设置则显现默许款式
}
else{
varstart=mycookie.indexOf("=",start1)+1;
varend=mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
varvalues=unescape(mycookie.substring(start,end));
if(values!=null)
{
skin=values;
}
}
returnskin;
}
3.绑定换肤按钮事务
skin.addEvent=function(){
varskins=$("skin").getElementsByTagName("li");
for(i=0;i<skins.length;i++)
{
skins.onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4.页面加载完成后设置皮肤款式
window.onload=function(){
skin.setSkin(skin.readCookie());//依据读取cookie前往值设置皮肤款式
skin.addEvent();//绑定按钮事务
你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 可以使用 CSS 检查工具进行设计。
页:
[1]