快捷導(dǎo)航

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
換膚

相關(guān)文章

超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的方法
這篇文章為大家分享了一個(gè)超精準(zhǔn)的javascript驗(yàn)證身份證號(hào)的具體實(shí)現(xiàn)方法，根據(jù)身份證號(hào)對其進(jìn)行性別的判定，感興趣的小伙伴們可以參考一下
2015-11-11
JScript中的條件注釋詳解
這篇文章主要介紹了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
通過滑動(dòng)翻頁效果實(shí)現(xiàn)和移動(dòng)端click事件問題
這篇文章主要介紹了滑動(dòng)翻頁效果實(shí)現(xiàn)和移動(dòng)端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
Javascript 繼承實(shí)現(xiàn)例子
在真正的Web站點(diǎn)和應(yīng)用程序中，幾乎不可能創(chuàng)建名為ClassA和ClassB的類，更可能的是創(chuàng)建表示特定事物（如形狀）的類?？紤]本章開頭所述的形狀的例子，Polygon、Triangle和Rectangle類就構(gòu)成了一組很好的探討數(shù)據(jù)。
2009-08-08