欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

切換CSS類的Javascript函數不起作用(亮/暗模式)

CSS
林國瑞2年前8瀏覽0評論

我在網頁上創建了一個亮/暗模式切換。toggle本身是一個圖像，單擊它會改變頁面背景顏色和文本顏色，以及一些附帶的東西，如圖像背景顏色的改變。當圖像被點擊時，它調用一個JS函數，為每個需要改變的元素切換一個類。最初，我為每個元素準備了一個函數，用一個獨特的類來觸發各種變化，這很有效，但是我想簡化這個函數，讓所有元素共享一個& quot亮/暗模式& quot類等函數可以切換它們。然而，現在代碼似乎沒有像預期的那樣響應。我對JavaScript很陌生，所以我確信這是一個明顯的錯誤。一個不同的腳本在頁面上工作，所以頁面鏈接。js文件正確。請看下面我的代碼。我刪掉了我認為不相關的部分。如果有更好的方法，我洗耳恭聽。謝謝大家！

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="light-mode">
    <span class="light-switch-span">
      <img class="light-switch light-mode" src="idea.png" onclick="lightMode()">
    </span>
    <script src="myScript.js"></script>
    <div class="photo-div">
      <img class="photo light-mode" src="img.png"></div>
    </div>
  </body>
</html>

/* CSS */

body {
    margin: 0;
    font-family: 'Poppins';
    background-color: black;
    color: white;
}

body.light-dark {
    background-color: white;
    color: black;
    transition: 0.5s;
}

.light-switch-span {
    padding: 0;
}

.light-switch {
    width: 2.5%;
    height: auto;
    position: absolute;
    right: 0%;
    object-fit: contain;
    margin-right: 5%;
    transition: filter .5s ease-in-out;
}

.light-switch.light-dark {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.photo {
    object-fit: contain;
    height: auto;
    width: 100%;
    border: 10px solid;
    border-radius: 50%;
    background-color: white;
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.photo.light-dark {
    background-color: black;
}

// JavaScript

function lightMode() {
    var all = document.querySelector(".light-mode");
    for(var i = 0; i < all.length; i++) {
        element.classList.toggle("light-dark");  
    }
}

首先，您必須使用querySelectorAll方法來獲取所有匹配的元素

你從哪里得到元素變量？我認為你應該試著這樣做

function lightMode() {
    var all = document.querySelectorAll(".light-mode");
    for(var i = 0; i < all.length; i++) {
        // replace element for all[n]
        all[i].classList.toggle("light-dark");  
    }
}