我想在我的網站上打開一個按鈕，讓用戶可以隨時更改為暗模式或亮模式。我按照教程進行了暗模式，但問題是用戶必須按 Enter 鍵才能進入暗模式..但我希望有一個按鈕可以幫助他們更改為暗模式或亮模式這是我的代碼在 js 中使用：-
<script>
window.onload = function () {
document.onkeypress = function (e) {
console.log(e);
e = e || window.event;
if (e.keyCode === 13) {
document.documentElement.classList.toggle("dark-mode");
document.querySelectorAll(".inverted").forEach((result) => {
result.classList.toggle("invert");
});
}
};
};
</script>
這是我在 css 中使用的：-
.dark-mode {
filter: invert(1) hue-rotate(180deg);
}
.invert {
filter: invert(1) hue-rotate(180deg);
}'
js 中的 .inverted 類是因為我不希望影像反轉它們的顏色..所以我給所有影像一個 class='inverted'
所以，這就是我所做的，有人請讓我知道我應該如何調出一個更改為暗模式或亮模式的按鈕，而不是按 Enter 鍵
謝謝！
uj5u.com熱心網友回復：
您可以onClick在按鈕上的事件上運行該函式，如下所示：
<button onClick="toggleMode()">Toggle Mode</button>
<script>
function toggleMode () {
document.documentElement.classList.toggle("dark-mode");
document.querySelectorAll(".inverted").forEach((result) => {
result.classList.toggle("invert");
})
}
</script>
uj5u.com熱心網友回復：
您可以在 HTML 頁面上創建一個按鈕，然后為其附加一個事件偵聽器。
function myfunction(e) {
console.log("you clicked");
document.documentElement.classList.toggle("dark-mode");
document.querySelectorAll(".inverted").forEach((result) => {
result.classList.toggle("invert");
});
}
const btn = document.querySelector('.btn')
btn.addEventListener('click', myfunction);<button class="btn">Dark Mode</button>順便說一句，你為什么在 react-app 中使用 script 標簽？
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344701.html
標籤：javascript html css 反应
上一篇：React匯入影像不適用于CSS