本文介绍一种通过 JavaScript 动态修改链接标签 href 属性来实现网页换肤的简单方法。无需复杂逻辑，仅需操作 CSS 文件路径即可切换主题，并附带保存主题至 Cookie 的建议，适合快速实现基础样式切换需求。
网页换肤实现方案
鉴于网络上现有的换肤方案往往过于冗长，我尝试探索一种更简洁的实现方式，并据此编写了以下示例。
HTML 结构
HTML 与 JavaScript 核心代码
<!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文件
默认样式文件
CSS 样式定义
body{
background: #ffffff;
}
红色主题样式文件
body{
background: #ff0000;
}
绿色主题样式文件
body{
background: #008000;
}
注意：虽然前端可以处理主题切换，但建议将主题参数保存至后端，以防止用户禁用 Cookie 后主题失效。
以上内容为本文的全部分享，希望能为读者提供有益参考，并欢迎继续支持本站。