Home > Web Front-end > JS Tutorial > Javascript combined with css to implement web page skinning function_javascript skills

Javascript combined with css to implement web page skinning function_javascript skills

WBOY
Release: 2016-05-16 18:42:42
Original
1660 people have browsed it
Html code part:
1. There must be a style sheet link with an id. We need to operate this link to call different hrefs.

2. Skin selection Button (add onclick event for each li in the background to trigger the skin change function)

  • Gray

  • Green

  • Yellow

  • Blue

  • Pink

  • Purple


Js part:
1. Skin changing method
//Set cookie, button selected state, page skin
skin.setSkin=function(n){
var skins =("skin").getElementsByTagName(" li");
for (i=0;i{
skins[i].className="";//Initialize button state
}
skin.setCookie(n);//Save the current style
("skin_" n).className="selected";//Set the style of the selected skin button
("cssfile").href="css/ main" n ".css";//Set page style
}
2. Access cookies
//Save the current skin n to cookie
skin.setCookie= function(n){
var expires=new Date();
expires.setTime(expires.getTime() 24*60*60*365*1000);
var flag="Skin_Cookie=" n ;
document.cookie=flag ";expires=" expires.toGMTString();
}
//Return the skin style set by the user
skin.readCookie=function(){
var skin=0;
var mycookie=document.cookie;
var name="Skin_Cookie";
var start1=mycookie.indexOf(name "=");
if(start1==-1 ){
skin=0;//If not set, display the default style
}
else{
var start=mycookie.indexOf("=",start1) 1;
var end =mycookie.indexOf(";",start);
if(end=-1){
end=mycookie.length;
}
var values= unescape(mycookie.substring(start, end));
if (values!=null)
{
skin=values;
}
}
return skin;
}
3 .Bind skin button event
skin.addEvent=function(){
var skins =("skin").getElementsByTagName("li");
for (i=0;i {
skins[i].onclick=function(){skin.setSkin(this.id.substring(5))};
}
}
4. Set the skin style after the page is loaded
window.onload=function(){
skin.setSkin(skin.readCookie());//Set according to the return value of reading the cookie Skin style
skin.addEvent();//Bind button events
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template