JS版网站风格切换实例代码

样式表连接,设3种风格,把你要改变的图片背景等写入样式表。


代码如下:

<link media="screen" href="/css/default.css" rel="stylesheet" type="text/css" title="default" />
<link media="screen" href="/css/blue.css" rel="alternate stylesheet" type="text/css" title="blue" />
<link media="screen" href="/css/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />

第一个是默认样式表。
脚本--作者:dynamicdrive.com
使用协议:http://www.dynamicdrive.com/notice.htm


代码如下:

//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)

调用方法


代码如下:

<a title="默认风格" href="javascript:chooseStyle('default',5)">默认风格</a>
<a title="橙色风格" href="javascript:chooseStyle('orange',5)">橙色风格</a>
<a title="蓝色风格" href="javascript:chooseStyle('blue',5)">蓝色风格</a>

注意:title内容改成你样式表的名字,我这里是设定为5天。

(0)

相关推荐

  • JS版网站风格切换实例代码

    样式表连接,设3种风格,把你要改变的图片背景等写入样式表. 复制代码 代码如下: <link media="screen" href="/css/default.css" rel="stylesheet" type="text/css" title="default" /> <link media="screen" href="/css/blue.css&qu

  • struts2的国际化实现网站整体中英文切换实例代码

    本文介绍了struts2的国际化实现网站整体中英文切换实例代码,分享给大家,具体如下: 环境要求:Struts2框架环境搭建成功 为了实现程序的国际化,必须先提供程序所需要的资源文件.资源文件的内容基本是key-value对,其中key是程序使用的部分,而value是程序的显示部分. 资源文件的命名可以是如下3种形式: baseName_language_country.properties baseName_language.properties baseName.properties 其中b

  • native.js获取手机硬件基本信息实例代码android版

    为大家分享一些android公共方法native.js实现代代码,如获取手机MAC地址,手机内存大小,手机存储空间大小,手机CPU信息等手机硬件基本信息 native.js获取手机MAC地址 /*得到手机MAC地址*/ function getMac() { var mac = "xxx-xxx-xxx-xxx"; if (plus.os.name == "Android") { //WifiManager var Context = plus.android.im

  • 使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换操作</title> <link rel="stylesheet"

  • 原生JS实现的放大镜效果实例代码

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

  • Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • Angular.js 实现数字转换汉字实例代码

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示: // 1.实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环:提示:ng-change指令 <div ng-app="my

  • BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • 最简单的tab切换实例代码

    JS: $(".con").eq(0).show(); $(".btn span").click(function(){ var num =$(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) CSS: body { cursor:default; -webkit-text-s

  • JS正则表达式判断有效数实例代码

    <script type="text/javascript"> function validate(){ var reg = new RegExp("^[0-9]*$"); var obj = document.getElementById("name"); if(!reg.test(obj.value)){ alert("请输入数字!"); } if(!/^[0-9]*$/.test(obj.value)){ a

随机推荐