JS version website style switching example code_javascript skills-JS Tutorial-php.cn

JS version website style switching example code_javascript skills

WBOY

Release： 2016-05-16 19:00:11

Original

1209 people have browsed it

Style sheet connection, set 3 styles, and write the picture background you want to change into the style sheet.

Copy code The code is as follows:

The first one is the default style sheet.
Script--Author: dynamicdrive.com
Usage agreement: http://www.dynamicdrive.com/notice.htm

Copy code The code is as follows:

 
//Style Sheet Switcher version 1.0 Nov 9th, 2005 
//Author: Dynamic Drive: http://www.dynamicdrive.com 
//Usage terms: http://www.dynamicdrive.com/notice.htm 
function getCookie(Name) { 
var re=new RegExp(Name "=[^;] ", "i") ; //construct RE to search for target name/value pair 
if (document.cookie.match(re)) //if cookie found 
return document.cookie.match(re)[0].split( "=")[1] //return its value 
return null 
} 
function setCookie(name, value, days) { 
var expireDate = new Date() 
//set "expstring" to either future or past date, to set or delete cookie, respectively 
var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate() parseInt(days)) : expireDate. setDate(expireDate.getDate()-5) 
document.cookie = name "=" value "; expires=" expireDate.toGMTString() "; path=/"; 
} 
function deleteCookie(name ){ 
setCookie(name, "moot") 
} 
function setStylesheet(title) { 
var i, cacheobj 
for(i=0; (cacheobj=document.getElementsByTagName(" link")[i]); i ) { 
if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) { 
cacheobj .disabled = true 
if(cacheobj.getAttribute("title") == title) 
cacheobj.disabled = false //enable chosen style sheet 
} 
} 
} 
 function chooseStyle(styletitle, days){ 
if (document.getElementById){ 
setStylesheet(styletitle) 
setCookie("mysheet", styletitle, days) 
} 
} 
var selectedtitle=getCookie("mysheet") 
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored 
setStylesheet(selectedtitle) 

Call method

Copy code The code is as follows:

Default Style
Orange style
Blue Style

Note: Change the title content to the name of your style sheet. I set it to 5 days here.