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
1641 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
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
Is the speed of php8.0 improved?
What does ps mask mean?
Velocity syntax introduction
How to restore Bluetooth headset to binaural mode
How is the performance of thinkphp?
what is world wide web
Win11 My Computer Added to Desktop Tutorial
What is the difference between hardware firewall and software firewall
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
