[英]How to add multiply styles document.documentElement.style.setProperty (js)
我正在添加深色和淺色主題，我更改了 bg-color，但無法更改文本顏色
Css （我沒有變量）
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')
})
該語句本身什么也不做：
('--text-color', 'white')
（它甚至不是一個真正的語句，只是一個結果被忽略的表達式。）
它前面的行不是 JavaScript 中的完整語句。 換行符/空格對解釋器來說並不重要。 （但對於人類來說，可讀性非常重要。）前面兩行都是一個聲明：
document.documentElement.style.setProperty
('--background', '#181818');
該語句以分號結束。 在這種情況下，我個人更喜歡單行的可讀性：
document.documentElement.style.setProperty('--background', '#181818');
如果要執行多個這樣的語句，則需要整個語句：
document.documentElement.style.setProperty('--background', '#181818');
document.documentElement.style.setProperty('--text-color', 'white');
在這種情況下，您可能希望堅持使用單行語句以提高可讀性，這樣您就可以輕松地看到一個語句在哪里結束，而另一個在哪里開始。
如果您有許多這樣的語句並且為了簡潔和/或可讀性而想要減少它們的長度，您可以將引用存儲在一個變量中：
const style = document.documentElement.style;
style.setProperty('--background', '#181818');
style.setProperty('--text-color', 'white');
// etc...
我建議你像這樣使用 classList 方法：
function changeTheme(){ document.body.classList.remove("theme1"); document.body.classList.add("theme2"); } .theme1:{ background:white; color:black; }.theme2:{ background:black; color:white; }
這就是我添加深色和淺色模式以正常工作的方式。
let toggle = document.querySelector("#toggle") let body = document.querySelector("body") toggle.addEventListener("click", ()=>{ if(body.classList.contains("dark")) return body.classList.remove("dark") return body.classList.add("dark") })
body{ height: 100vh; width: 100vw; }.dark{ background: black; }.title{ color: gray; }.dark.title{ color: #ffffff; }
<body class="dark"> <button id="toggle"> dark/light </button> <div class="title"> <h1> My Title</h1> </div> </body>
如果我是你，我會在諸如“.darkTheme”之類的主體元素中添加一個 class ，這只是一行 JS 和一個更快的程序。 下面的片段向您展示了如何做到這一點，只是您可以讓主體默認繼承一個主題（類）。
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>
盡管如果您不尋求這種方式，我可以幫助您。
關鍵是您的 JS 代碼以“);”結束 setProperty 方法而且你不能指望你的代碼像“（'--text-color'，'white'）”那樣工作是沒有意義的。
您可以像這樣編輯您的 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('--some-color', 'green') 在 IE 中不起作用
[英]document.documentElement.style.setProperty('--some-color', 'green') does not work in IE
如何找到document.DocumentElement.Client的Cordinates
[英]How to find Cordinates of document.DocumentElement.Client
Vanilla JS ready() 函數 - 什么是`document.documentElement.doScroll`？
[英]Vanilla JS ready() function - What is `document.documentElement.doScroll`?
如何設置document.documentElement.innerHTML ='TEXT';的對齊方式；
[英]How to set align of document.documentElement.innerHTML = 'TEXT';
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.