如何添加多重樣式document.documentElement.style.setProperty（js）

Question 1

我正在添加深色和淺色主題，我更改了bg-color，但無(wú)法更改文本顏色

Css（我沒(méi)有變量）

body {
    color: var(--text-color, white);
    background-color: var(--background, #181818);
    margin: 0px;
    padding: 0px;
}

Js

document.getElementById('dark_theme').addEventListener
    ('click', () => {
        document.documentElement.style.setProperty
        ('--background', '#181818');
        ('--text-color', 'white')

    })
document.getElementById('light_theme').addEventListener
    ('click', () => {
        document.documentElement.style.setProperty
        ('--background', 'white');
        ('--text-color', 'black')
        
    })

Question 2

如果我是你，我會(huì)在body元素中添加一個(gè)類(lèi)，比如".darkTheme"，這只需要一行JS和一個(gè)更快的程序。下面的代碼片段向您展示了如何做到這一點(diǎn)，只是在默認(rèn)情況下，您可以讓主體繼承主題（類(lèi)）。

document.getElementById('dark_theme').addEventListener('click', () => {
  document.body.classList.add("darkTheme");
  document.body.classList.remove("lightTheme");
});
document.getElementById('light_theme').addEventListener('click', () => {
  document.body.classList.remove("darkTheme");
  document.body.classList.add("lightTheme");
});

body {
  color: var(--text-color, white);
  background-color: var(--background, #181818);
  margin: 0px;
  padding: 0px;
}

body.darkTheme {
  --background: #181818;
  --text-color: white;
}

body.lightTheme {
  --background: white;
  --text-color: black;
}

<html>

<body>
  <button id="dark_theme"> Apply the dark theme </button>
  <button id="light_theme"> Apply the light theme </button>
</body>

</html>

雖然如果你不這樣做我可以幫你。

關(guān)鍵是JS代碼以“；”結(jié)束setProperty方法你不能期望你的代碼像"('--text-color'，'白色'）那樣工作，“這毫無(wú)意義。

您可以這樣編輯JS：

let myDocStyle = document.documentElement.style;
document.getElementById('dark_theme').addEventListener('click', () => {
  myDocStyle.setProperty('--background', '#181818');
  myDocStyle.setProperty('--text-color', 'white');
});
document.getElementById('light_theme').addEventListener('click', () => {
  myDocStyle.setProperty('--background', 'white');
  myDocStyle.setProperty('--text-color', 'black');
});

Answer 1

如果我是你，我會(huì)在body元素中添加一個(gè)類(lèi)，比如".darkTheme"，這只需要一行JS和一個(gè)更快的程序。下面的代碼片段向您展示了如何做到這一點(diǎn)，只是在默認(rèn)情況下，您可以讓主體繼承主題（類(lèi)）。

document.getElementById('dark_theme').addEventListener('click', () => {
  document.body.classList.add("darkTheme");
  document.body.classList.remove("lightTheme");
});
document.getElementById('light_theme').addEventListener('click', () => {
  document.body.classList.remove("darkTheme");
  document.body.classList.add("lightTheme");
});

body {
  color: var(--text-color, white);
  background-color: var(--background, #181818);
  margin: 0px;
  padding: 0px;
}

body.darkTheme {
  --background: #181818;
  --text-color: white;
}

body.lightTheme {
  --background: white;
  --text-color: black;
}

<html>

<body>
  <button id="dark_theme"> Apply the dark theme </button>
  <button id="light_theme"> Apply the light theme </button>
</body>

</html>

雖然如果你不這樣做我可以幫你。

關(guān)鍵是JS代碼以“；”結(jié)束setProperty方法你不能期望你的代碼像"('--text-color'，'白色'）那樣工作，“這毫無(wú)意義。

您可以這樣編輯JS：

let myDocStyle = document.documentElement.style;
document.getElementById('dark_theme').addEventListener('click', () => {
  myDocStyle.setProperty('--background', '#181818');
  myDocStyle.setProperty('--text-color', 'white');
});
document.getElementById('light_theme').addEventListener('click', () => {
  myDocStyle.setProperty('--background', 'white');
  myDocStyle.setProperty('--text-color', 'black');
});

如何添加多重樣式document.documentElement.style.setProperty（js）

熱門(mén)問(wèn)答

使用ffill（或其他方法）更新pandas dataframe中列中的MULTIPLE值

如何使用參數(shù)在C#WPF中繪制圓弧？

在python中遍歷listnode

ArrayList—添加元素，被動(dòng)跳過(guò)冗余元素

帶連字號(hào)的奇怪事物

安卓系統(tǒng)：只有在我創(chuàng)建了文件的情況下，我才能通過(guò)我的應(yīng)用程序打開(kāi)文件（如果我在應(yīng)用程序外復(fù)制，它會(huì)被拒絕訪問(wèn)）

R語(yǔ)言中如何將報(bào)錯(cuò)信息保存到文件中

比較函數(shù)做參數(shù)時(shí) decltype相關(guān)問(wèn)題

spring-boot @Component創(chuàng)建失敗

我遇到vue的bug怎么解決

vue里的v-show或者v-show能否實(shí)現(xiàn)動(dòng)態(tài)

c# Security提示ProtectedData在上下文不存在。