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)文章
超精準(zhǔn)的javascript驗(yàn)證身份證號的方法
這篇文章為大家分享了一個(gè)超精準(zhǔn)的javascript驗(yàn)證身份證號的具體實(shí)現(xiàn)方法，根據(jù)身份證號對其進(jìn)行性別的判定，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了JScript中的條件注釋詳解,本文講解了@cc_on、@if、@set、@_win32、@_win16、@_mac等條件注釋語句及可用于條件編譯的預(yù)定義變量,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)頁面截圖3種解決方案
網(wǎng)頁截圖是指將網(wǎng)頁上的內(nèi)容截取下來,并保存為圖片的過程,下面這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)頁面截圖的3種解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
原生JavaScript實(shí)現(xiàn)Ajax異步請求
ajax現(xiàn)在是一種非常流行的技術(shù)，現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實(shí)現(xiàn)ajax功能，但是明白其原理也是非常重要的，下面是來使用純javascript實(shí)現(xiàn)獲取服務(wù)器端的功能來展示如何使用純javascript實(shí)現(xiàn)ajax功能，以弄清其原理.2017-11-11
完美解決手機(jī)網(wǎng)頁中輸入框被輸入法遮擋的問題
下面小編就為大家分享一篇完美解決手機(jī)網(wǎng)頁中輸入框被輸入法遮擋的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
JS 使用for循環(huán)遍歷子節(jié)點(diǎn)查找元素
這篇文章主要介紹了JS 使用for循環(huán)配合數(shù)組遍歷子節(jié)點(diǎn)查找元素，經(jīng)測試，效果不錯(cuò)，需要的朋友可以看看2014-09-09
通過滑動翻頁效果實(shí)現(xiàn)和移動端click事件問題
這篇文章主要介紹了滑動翻頁效果實(shí)現(xiàn)和移動端click事件問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
使用不同的方法結(jié)合/合并兩個(gè)JS數(shù)組
這是一篇關(guān)于JavaScript數(shù)組使用的一些技巧，我們將使用不同的方法結(jié)合/合并兩個(gè)JS數(shù)組，以及討論每個(gè)方法的優(yōu)點(diǎn)/缺點(diǎn)2014-09-09
微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)導(dǎo)航功能的操作步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
在真正的Web站點(diǎn)和應(yīng)用程序中，幾乎不可能創(chuàng)建名為ClassA和ClassB的類，更可能的是創(chuàng)建表示特定事物（如形狀）的類?？紤]本章開頭所述的形狀的例子，Polygon、Triangle和Rectangle類就構(gòu)成了一組很好的探討數(shù)據(jù)。2009-08-08