js实现了简单的网页换肤效果

中心思想：网页换肤的原理是通过调用不同的样式表文件来实现不同的皮肤切换，改变后的皮肤需要包含在Cookie中，以便用户下次访问时可以显示用户自定义的皮肤。

步骤：

1.在设计HTML代码时，使用了一些技巧，即皮肤选择按钮的元素li的id被设置为与网页皮肤的样式文件的名称相同。这样，换肤操作可以简化很多。

2.HTML结构应该有一个id为的样式表链接，可以通过操作链接的herf属性值来更改外观

link rel='样式表' href=' CSS/skin _ 0 . CSS ' id=' CSS file '/

3.根据li的当前id，通过attr()方法为链接元素的href属性设置不同的值代码，如下所示：

var $ Li=$(' # skin Li ')；$ Li . click(function(){ $(“#”this . id)。addClass('选定')。兄弟姐妹()。removeClass('选定')；$('#cssfile ')。attr('href '，' css/' this.id '。CSS ')；});4.当为单个皮肤选择按钮时，可以切割皮肤。但是当用户刷新网页或者关闭浏览时，皮肤会被初始化，所以需要保存当前选中的皮肤(jQuery中有一个Cookie插件)，简化了Cookie的操作。

//将皮肤保存到cookie $。cookie(' mycsskin '，this.id，{path:'/'，expires :10 })；保存后，可以通过Cookies获取当前皮肤。如果cookie确实存在，请将当前值设置为cookie记录：

//获取Cookie var中的皮肤cookie _ skin=$。cookie(' mycsskin ')；//判断皮肤中是否存在(cookie _ skin){ switch skin(cookie _ skin)；}//设置皮肤功能switch skin(skin name){ $(' # ' skin name)。addclass ('selected ')。兄弟姐妹()。cookid中的remove class(' selected ')；$('#cssfile ')。attr('href '，' css/' skinName '。CSS ')；$.cookie(' mycsskin '，skinName，{path:'/'，expires :10 })；}以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！