js簡單實現(xiàn)網(wǎng)頁換膚功能
更新時間：2022年07月01日 15:30:12 投稿：lijiao
這篇文章主要為大家詳細介紹了js簡單實現(xiàn)網(wǎng)頁換膚功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
我發(fā)現(xiàn)網(wǎng)上寫換膚功能寫的有點長，就想想如何更簡單方法實現(xiàn)這個功能，于是我自己寫了一個。
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：當然設置主題的參數(shù)也可以保存到后端（推薦），防止禁用cookies主題無法生效。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了JavaScript仿百度切換皮膚功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了微信小程序傳值以及獲取值方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
解決LayUI數(shù)據(jù)表格復選框不居中顯示的問題
今天小編就為大家分享一篇解決LayUI數(shù)據(jù)表格復選框不居中顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
iscroll動態(tài)加載數(shù)據(jù)完美解決方法
這篇文章主要為大家詳細介紹了iscroll動態(tài)加載數(shù)據(jù)的完美解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了js中的幾種設計模式，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了webpack之devtool詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了BootStrap modal實現(xiàn)拖拽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
CSDN上快速結貼的方法，JS實現(xiàn)...2007-03-03
JavaScript?中處理?null和?undefined的常見方法
文章介紹了可選鏈操作符（?.）和空值合并操作符（??）的使用方法,并對比了它們與邏輯非運算符（!）的區(qū)別,還討論了使用寬松比較運算符（==）和自定義函數(shù)來優(yōu)化判斷的幾種方法,以提高代碼的可讀性和性能,感興趣的朋友跟隨小編一起看看吧2025-01-01
這篇文章主要介紹了JS實現(xiàn)簡單的右下角彈出提示窗口的方法,可實現(xiàn)點擊連接右下角彈出提示框的功能,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06