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

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

localStorage 屬性不存儲(chǔ)元素的超文本引用屬性

localStorage 屬性不存儲(chǔ)元素的超文本引用屬性

慕虎7371278 2023-03-24 16:32:58
屬性localStorage( localStorage.setItem('theme', element);) 不存儲(chǔ)href元素 ( element.href = '../assets/css/syntax-highlighting/synthwave-84.css';) 的屬性:const lightButton = document.getElementById('theme-light');const synthwaveButton = document.getElementById('theme-synthwave-84');const body = document.body;var check = document.getElementById('theme_css').classList[0] === 'theme-light';const theme = localStorage.getItem('theme');var element = document.getElementById('theme_css');if (theme) {  body.classList.add(theme);}synthwaveButton.onclick = () => {  element.href = '../assets/css/syntax-highlighting/synthwave-84.css';  localStorage.setItem('theme', element);  body.classList.replace('theme-dark', 'theme-synthwave-84');  body.classList.replace('theme-light', 'theme-synthwave-84');  body.classList.replace('theme-cyberpunk', 'theme-synthwave-84');  body.classList.replace('theme-tron', 'theme-synthwave-84');  localStorage.setItem('theme', 'theme-synthwave-84');};HTML:<link rel="stylesheet" href="../assets/css/syntax-highlighting/suru-plus.css" id="theme_css" />
查看完整描述

3 回答

?
森欄

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

您不能將 DOM 元素保存到 LocalStorage。LocalStorage 僅存儲(chǔ)字符串(這很重要!您甚至不能存儲(chǔ)數(shù)字或日期)。通常,如果需要保存復(fù)雜數(shù)據(jù),人們會(huì)存儲(chǔ) JSON,但這里存儲(chǔ)主題名稱(恰好是一個(gè)字符串)就足夠了。


總的來(lái)說(shuō),我會(huì)推薦一種不同的方法。我會(huì)制作一個(gè)函數(shù)changeTheme(),它采用主題名稱并對(duì)所有主題都相同,并使用一個(gè)對(duì)象來(lái)存儲(chǔ)可用的主題和 CSS 路徑。


const themes = {

  "theme-dark": "../assets/css/syntax-highlighting/dark.css",

  "theme-light": "../assets/css/syntax-highlighting/light.css",

  "theme-cyberpunk": "../assets/css/syntax-highlighting/cyberpunk.css",

  "theme-tron": "../assets/css/syntax-highlighting/tron.css",

  "theme-synthwave-84": "../assets/css/syntax-highlighting/synthwave-84.css"

};


function changeTheme(newTheme) {

  var allThemes = Object.keys(themes);

  if (!allThemes.includes(newTheme)) return;

  allThemes.forEach(theme => document.body.classList.remove(theme));

  document.body.classList.add(newTheme);

  document.getElementById('theme_css').href = themes[newTheme];

  localStorage.setItem('theme', newTheme);

}


// wire up buttons

document.querySelectorAll('.theme-switch').forEach(button => {

  button.onclick = () => changeTheme(button.id);

});


// load saved theme

changeTheme(localStorage.getItem('theme'));

與這樣的按鈕一起,您將擁有一個(gè)沒(méi)有代碼重復(fù)的工作主題切換器。


<button class="theme-switch" id="theme-synthwave-84">Synthwave 84</button>

<button class="theme-switch" id="theme-tron">Tron</button>

當(dāng)然你可以使用鏈接代替按鈕,或者changeTheme()你能想到的任何其他觸發(fā)方式。


查看完整回答
反對(duì) 回復(fù) 2023-03-24
?
侃侃爾雅

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

您只能將字符串作為值存儲(chǔ)在本地存儲(chǔ)中。您要存儲(chǔ)的任何對(duì)象都必須首先使用JSON.stringify. 但是,您也不能序列化 DOM 元素。或者你可以,但是你只會(huì)得到一個(gè)空對(duì)象,因?yàn)?DOM 元素的所有屬性都存儲(chǔ)在 DOM 元素的原型上,并且JSON.stringify只作用于對(duì)象自己的屬性,所以你必須做類似的事情:

localStorage.setItem('theme-css', element.href);


查看完整回答
反對(duì) 回復(fù) 2023-03-24
?
海綿寶寶撒

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

您不能將 DOM 元素保存到 LocalStorage。無(wú)論如何,您只能將鏈接保護(hù)為 LocalStorage 條目。



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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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