js简单实现网页换肤功能

我发现网上写换肤功能写的有点长,就想想如何更简单方法实现这个功能,于是我自己写了一个。

html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<link id="changelink" rel="stylesheet" href="css/default.css" rel="external nofollow" />

</head>

<body>

<script>

var csslink = document.getElementById("changelink");

//初始化主题

loadtheme();

function changetheme(color){

csslink.href = "css/"+color+".css";

//保存主题到cookies

document.cookie="theme="+color;

}

function loadtheme(){

//从cookies读取主题

var themevalue=document.cookie.split(";")[0].split("=")[1];

if(themevalue==null){

csslink.href = "css/default.css";

}else{

csslink.href = "css/"+themevalue+".css";

}

}

</script>

<button onclick="changetheme('default')">默认</button>

<button onclick="changetheme('red')">红色</button>

<button onclick="changetheme('green')">绿色</button>

</body>

</html>

css文件

default.css

body{

background: #ffffff;

}

red.css

body{

background: #ff0000;

}

green.css

body{

background: #008000;

}

 PS:当然设置主题的参数也可以保存到后端(推荐),防止禁用cookies主题无法生效。

以上是 js简单实现网页换肤功能 的全部内容, 来源链接: utcz.com/z/314030.html

回到顶部