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