我是 HTML、CSS 和 Javascript 的初學者（過去做過 KhanAcademy 的東西，但也忘記了大部分內容）。我正在嘗試制作一個帶有暗模式的簡單網頁（盡可能少的 Javascript）。問題是，鏈接在暗模式下的對比度很低。我正在使用此代碼將 .dark-mode 類添加到我的 html 的 body 元素并使用 CSS 對其進行樣式設定。
Javascript:
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
CSS:
html, body {
background-color: ivory;
color: black;
}
.dark-mode {
background-color: #142514;
color: blanchedalmond;
}
button.right {
float: right;
}
HTML:
<button class="right" onclick="myFunction()">Toggle Dark Mode</button>
我嘗試將它添加到 CSS，但我意識到標簽沒有得到 。
CSS:
a.dark-mode:link { color: lightskyblue; }
a.dark-mode:visited { color: #6d4b8d; }
a.dark-mode:hover { color: #ffffff; }
a.dark-mode:active { color: #ff4040; text-decoration:none; font-weight:normal; }
有人可以幫我找出一種在 Javascript 上輕量級的方法，可以將暗模式類添加到標簽以及正文中，或者指定當正文具有暗模式類時標簽應該獲取這些屬性？任何幫助將不勝感激。
uj5u.com熱心網友回復：
問題是你.dark-mode在你的元素上切換一個類<body/>，但是你正在撰寫你的 CSS 選擇器，就好像它們本身就有一個.dark-mode類一樣。
這個選擇器：
a.dark-mode {}
...將針對看起來像這樣的元素：
<a href="mysite.com" class="dark-mode">Link</a>
因為你想用一個類來定位 a內的所有錨點，所以你需要將選擇器重寫為：<body/>.dark-mode
.dark-mode a:link { color: lightskyblue; }
.dark-mode a:visited { color: #6d4b8d; }
.dark-mode a:hover { color: #ffffff; }
.dark-mode a:active { color: #ff4040; text-decoration:none; font-weight:normal; }
...它匹配元素內的所有錨點 class .dark-mode。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/410087.html
標籤：