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