第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何創(chuàng)建一個(gè) jQuery 函數(shù)來(lái)切換暗模式?

如何創(chuàng)建一個(gè) jQuery 函數(shù)來(lái)切換暗模式?

不負(fù)相思意 2021-06-10 17:27:08
我正在為我的網(wǎng)站設(shè)計(jì)暗模式。鑒于我有很多書(shū)面內(nèi)容,這對(duì)晚上閱讀特別有幫助。我有一個(gè)開(kāi)關(guān),并借用了一個(gè)到目前為止似乎有效的功能:$(function() {  $(".switch").click(function() {    $("#canvas-wrapper").css("background", "#222");    $("p").css("color", "#DDD");    });});我希望用戶根據(jù)需要打開(kāi)和關(guān)閉這些更改。但是,當(dāng)我嘗試添加另一行(為另一個(gè)元素定義 css 更改)時(shí),該函數(shù)僅將樣式應(yīng)用于第一個(gè)#canvas-wrapper元素。此后的所有內(nèi)容都將被忽略。我的語(yǔ)法稍后在函數(shù)中不正確嗎?此外,如果用戶停用切換,我需要以將 CSS 返回到其原始狀態(tài)的方式編寫(xiě)函數(shù)。我將如何處理這個(gè)問(wèn)題?我對(duì) jQuery 的使用很差,并且對(duì)這門(mén)語(yǔ)言沒(méi)有很多經(jīng)驗(yàn)。
查看完整描述

3 回答

?
Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

您可以通過(guò)一些技巧來(lái)解決這個(gè)問(wèn)題,您的問(wèn)題的直接答案是通過(guò)為暗/亮主題實(shí)現(xiàn)切換類(lèi)。


例如你看這個(gè)演示

<div class="change-color">

  <p>Hello World</p>

</div>


<div class="change-color">

  <p>Hello World 2</p>

</div>


<button>Change color</button>

和我們的腳本:


// find elements

var anotherColor = $(".change-color")

var button = $("button")


// handle click and add class

button.on("click", function(){

  anotherColor.toggleClass("another-color")

})

和我們的風(fēng)格:


body {

  background: #000;

  color: red;

}


button {

  background: #0084ff;

  border: none;

  border-radius: 5px;

  padding: 8px 14px;

  font-size: 15px;

  color: #fff;

}


.another-color {

  background: #ddd;

}

但是您也可以通過(guò)使用根變量顏色來(lái)解決問(wèn)題,例如:


:root {

  --color-bg: #000;

}


.default-color {

  background-color: var(--color-bg);

}


.another-color {

  --color-bg: #ddd;

}

你可以看一下這個(gè)演示過(guò)


查看完整回答
反對(duì) 回復(fù) 2021-06-24
?
精慕HU

TA貢獻(xiàn)1845條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可能需要為每個(gè)元素編寫(xiě)一些 css,無(wú)論是在亮模式還是暗模式下。使用 javascript 在兩者之間切換。您可以有一個(gè)用于淺模式 (.light-mode) 的類(lèi),然后是用于暗模式的類(lèi)。只要 class-wrapper 是一個(gè) div,你應(yīng)該沒(méi)問(wèn)題。


我會(huì)使用一個(gè)具有全局訪問(wèn)權(quán)限的 js 變量來(lái)訪問(wèn)模式并將其綁定到一個(gè)函數(shù)中。


css


.light-mode{



    some more css classes for light mode


}


.dark-mode{



    some more css classes for dark mode


}


查看完整回答
反對(duì) 回復(fù) 2021-06-24
  • 3 回答
  • 0 關(guān)注
  • 178 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)