簡(jiǎn)單實(shí)用：web前端實(shí)現(xiàn)網(wǎng)頁(yè)主題切換功能

題切換是一種常見(jiàn)的需求，它可以讓用戶(hù)根據(jù)自己的喜好和環(huán)境選擇適合的界面風(fēng)格。

了解主題切換背景知識(shí)

1、主題切換的意義及應(yīng)用場(chǎng)景

在現(xiàn)代化的網(wǎng)站中，不同的主題樣式，能夠給用戶(hù)帶來(lái)不同的視覺(jué)感受和交互體驗(yàn)。例如，在夜間模式下，減少亮度可以保護(hù)用戶(hù)的眼睛，提高使用效果。因此，實(shí)現(xiàn)一個(gè)主題切換功能對(duì)于改善用戶(hù)體驗(yàn)至關(guān)重要。

2、常見(jiàn)的主題切換實(shí)現(xiàn)方式

實(shí)現(xiàn)主題切換功能有多種方法，主要包括通過(guò)CSS樣式切換、JavaScript腳本切換和數(shù)據(jù)庫(kù)讀取配置文件切換等。

準(zhǔn)備工作

1、創(chuàng)建基本的HTML結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 頁(yè)面內(nèi)容 -->
    <h1>網(wǎng)頁(yè)主題切換功能演示</h1>
    <p>請(qǐng)選擇喜歡的主題：</p>
    <button id="lightTheme">白天模式</button>
    <button id="darkTheme">夜間模式</button>
    <script src="script.js"></script>
</body>
</html>

2、引入必要的CSS和JavaScript文件

為了實(shí)現(xiàn)主題切換功能，我們需要在HTML文件中，引入相關(guān)的CSS和JavaScript文件。創(chuàng)建一個(gè)style.css文件和script.js文件，并將其鏈接到index.html中。

通過(guò)CSS實(shí)現(xiàn)主題切換

1、使用CSS變量定義主題色彩

在style.css文件中，定義一些全局的CSS變量來(lái)表示不同的主題色彩。例如，可以定義--primary-color作為主題的主色調(diào)。

<style type="text/css">
:root {
  --primary-color: #007bff;
}

.light-mode {
  --primary-color: #007bff;
  --background-color: #ffffff;
  --text-color: #000000;
}

.dark-mode {
  --primary-color: #dd403a;
  --background-color: #333333;
  --text-color: #ffffff;
}

button {
  background-color: var(--primary-color);
  color: var(--text-color);
}
</style>

2、利用媒體查詢(xún)和@media規(guī)則設(shè)置不同的主題樣式

<style type="text/css">
@media (prefers-color-scheme: dark) {
  /* 當(dāng)系統(tǒng)設(shè)置為暗色模式時(shí)顯示夜間模式 */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
}

@media (prefers-color-scheme: light) {
  /* 當(dāng)系統(tǒng)設(shè)置為亮色模式時(shí)顯示白天模式 */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
}
</style>

3、通過(guò)JavaScript來(lái)改變CSS變量的值

在script.js文件中，使用JavaScript來(lái)控制主題的切換。通過(guò)訪(fǎng)問(wèn)DOM元素的style屬性，修改CSS變量的值，從而改變主題。

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  document.documentElement.classList.add('light-mode');
  document.documentElement.classList.remove('dark-mode');
});

darkModeButton.addEventListener('click', ()=> {
  document.documentElement.classList.add('dark-mode');
  document.documentElement.classList.remove('light-mode');
});

通過(guò)JavaScript實(shí)現(xiàn)主題切換

1、方式1：使用JavaScript修改DOM元素的類(lèi)名

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  document.body.className='light-mode';
});

darkModeButton.addEventListener('click', ()=> {
  document.body.className='dark-mode';
});

2、方式2：利用JavaScript動(dòng)態(tài)生成style標(biāo)簽并插入到HTML中

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  const style=document.createElement('style');
  style.innerHTML=`
    body {
      --primary-color: #007bff;
      --background-color: #ffffff;
      --text-color: #000000;
    }
  `;
  document.head.appendChild(style);
});

darkModeButton.addEventListener('click', ()=> {
  const style=document.createElement('style');
  style.innerHTML=`
    body {
      --primary-color: #dd403a;
      --background-color: #333333;
      --text-color: #ffffff;
    }
  `;
  document.head.appendChild(style);
});

3、方式3：通過(guò)AJAX請(qǐng)求加載不同的CSS文件

const lightModeButton=document.getElementById('lightTheme');
const darkModeButton=document.getElementById('darkTheme');

lightModeButton.addEventListener('click', ()=> {
  loadCSS('light-theme.css');
});

darkModeButton.addEventListener('click', ()=> {
  loadCSS('dark-theme.css');
});

function loadCSS(filename) {
  const link=document.createElement('link');
  link.href=filename;
  link.rel='stylesheet';
  document.head.appendChild(link);
}

希望本文能夠?qū)δ兴鶐椭兄x您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。

家好，今天給大家介紹一款，JavaScript+css實(shí)現(xiàn)的下拉菜單，明暗模式切換html頁(yè)面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

隱藏式下拉菜單，明暗模式隨意切換（圖2）

圖2

代碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

圖3

本源碼編碼：10214，需要的朋友，訪(fǎng)問(wèn)下面鏈接后，搜索10214，即可獲取。

「鏈接」

高興鐵鐵們能來(lái)看html網(wǎng)頁(yè)設(shè)計(jì)第二期~~~~撒花~~~~~

哎呀呀~實(shí)在是抱歉?jìng)渥?biāo)簽我記錯(cuò)了QAQ

這個(gè)才是備注標(biāo)簽不是//

首先我們先來(lái)學(xué)習(xí)上節(jié)課留下的劇透，分別是:

1.標(biāo)題標(biāo)簽h1~h6

有人就說(shuō)了標(biāo)題標(biāo)簽上次劇透不就只有h1標(biāo)簽嗎?

嘿嘿，其實(shí)他還有兄弟姐妹啦~

看圖，代碼是從上往下從左往右執(zhí)行的請(qǐng)記住這個(gè)順序哦~

還有,左邊是代碼右邊是網(wǎng)頁(yè)上面的效果哦~

源代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如圖所示，h1標(biāo)簽是最大的，h6標(biāo)簽是最小的

是不是很簡(jiǎn)單呀,現(xiàn)在已經(jīng)學(xué)會(huì)了一個(gè)知識(shí)點(diǎn)了哦~

2.段落標(biāo)簽 p標(biāo)簽

源代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一條p標(biāo)簽</p>

<p>第二條p標(biāo)簽</p>

<p>第三條p標(biāo)簽</p>

</body>

</html>

3.鏈接標(biāo)簽 a標(biāo)簽

鏈接標(biāo)簽是什么?顧名思義就是一個(gè)鏈接看代碼：

href是什么東西啊？是a標(biāo)簽的屬性啦~里面用來(lái)輸入你需要跳轉(zhuǎn)到的網(wǎng)頁(yè)的鏈接

屬性里面的東西是不會(huì)出現(xiàn)在網(wǎng)頁(yè)上面的出現(xiàn)的只有在a標(biāo)簽里面的內(nèi)容哦

當(dāng)我點(diǎn)擊百度這兩個(gè)字后就給我跳轉(zhuǎn)到了我們href屬性里面的https://www.baidu.com

當(dāng)然我們也可以跳轉(zhuǎn)到我們自己制作的網(wǎng)頁(yè)上面但要求是同一個(gè)項(xiàng)目下面的網(wǎng)頁(yè)

是不是很有趣~

看視頻:

視頻中我們點(diǎn)擊鏈接后就跳轉(zhuǎn)到了山這個(gè)網(wǎng)頁(yè)出現(xiàn)了一張山的圖片，是不是有點(diǎn)小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳轉(zhuǎn)到山的網(wǎng)頁(yè)</a>

</body>

</html>

4.圖像標(biāo)簽 img標(biāo)簽

圖像標(biāo)簽標(biāo)簽如其意，就是用來(lái)上傳圖像的一個(gè)標(biāo)簽~~

我們這里介紹一下img的兩個(gè)屬性:

src就是用來(lái)放圖片的地址的，他會(huì)根據(jù)地址去找圖片然后把圖片放到網(wǎng)頁(yè)上面。

alt有什么用啊就是當(dāng)圖片顯示失敗的時(shí)候就會(huì)顯示alt里面的文字

看視頻:

我們把圖片的地址破壞后，就會(huì)顯示一個(gè)圖片錯(cuò)誤的圖標(biāo)和alt里面的內(nèi)容

怎么拖圖片到img文件下，老師~~~我不知道

看視頻

嘿嘿就直接把文件拖進(jìn)來(lái)就ok了是不是很簡(jiǎn)單~

okk，好快啊怎么一下就學(xué)完了今天的知識(shí)點(diǎn)~~~

嘻嘻今天可是有作業(yè)的~

請(qǐng)根據(jù)下面的網(wǎng)頁(yè)仿寫(xiě)一下:

完成后作業(yè)發(fā)再評(píng)論區(qū)哦，有什么不懂的可以留言包回答的。

加油呀，每天學(xué)一點(diǎn)爭(zhēng)取做出屬于自己的一個(gè)網(wǎng)頁(yè)~

上一期

在線(xiàn)咨詢(xún)

上一篇：13個(gè)JavaScript 一行程序，讓你看起來(lái)像個(gè)
下一篇：好程序員web前端培訓(xùn)分享HTMLCSS之HTML表

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

簡(jiǎn)單實(shí)用：web前端實(shí)現(xiàn)網(wǎng)頁(yè)主題切換功能

了解主題切換背景知識(shí)

準(zhǔn)備工作

通過(guò)CSS實(shí)現(xiàn)主題切換

通過(guò)JavaScript實(shí)現(xiàn)主題切換

家好，今天給大家介紹一款，JavaScript+css實(shí)現(xiàn)的下拉菜單，明暗模式切換html頁(yè)面前端源碼（圖1）。送給大家哦，獲取方式在本文末尾。

隱藏式下拉菜單，明暗模式隨意切換（圖2）

代碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

本源碼編碼：10214，需要的朋友，訪(fǎng)問(wèn)下面鏈接后，搜索10214，即可獲取。

「鏈接」

1.標(biāo)題標(biāo)簽h1~h6

2.段落標(biāo)簽 p標(biāo)簽

3.鏈接標(biāo)簽 a標(biāo)簽

4.圖像標(biāo)簽 img標(biāo)簽

您的項(xiàng)目需求