在單獨的 div 單擊時將 div 顏色更改回正常
[英]Change div color back to normal on seperate div click
問題描述
我遇到無法使用 JS 將 div 顏色更改回其原始顏色的問題。 相同格式的 JS 適用於其他功能，例如移動 div 和顯示/隱藏其他 div。 但是，當我嘗試包含 colors 的更改時，它不起作用。
下面是我的 JS 代碼，問題出在sidebar ( <div2> ) 下：
var button = document.getElementById("id_switch"); var div2 = document.getElementById("id_sidebar"); var div = document.getElementById("id_button_switch"); var div3 = document.getElementById("id_sun_icon"); var div4 = document.getElementById("id_lightMode"); var div5 = document.getElementById("id_moon_icon"); var div6 = document.getElementById("id_darkMode"); button.addEventListener("click", function() { if (div.style.marginLeft === "20px") { div.style.marginLeft = "2.5px"; } else { div.style.marginLeft = "20px"; }; }); button.addEventListener("click", function() { if (div2.style.backgroundColor === "#012342") { div2.style.backgroundColor = "#202023"; } else { div2.style.backgroundColor = "#012342"; }; }); button.addEventListener("click", function() { if (div3.style.display === "flex") { div3.style.display = "none"; } else { div3.style.display = "flex"; }; }); button.addEventListener("click", function() { if (div5.style.display === "none") { div5.style.display = "flex"; } else { div5.style.display = "none"; }; }); button.addEventListener("click", function() { if (div4.style.display === "flex") { div4.style.display = "none"; } else { div4.style.display = "flex"; }; }); button.addEventListener("click", function() { if (div6.style.display === "none") { div6.style.display = "flex"; } else { div6.style.display = "none"; }; });
/* Google Font Import - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } /*---------------------------------------------------------------------------------------------*/ body{ min-height: 100vh; /*background-color: rgb(30, 29, 29)*/; background-color: #000000; transition: var(--tran-05); } /*----------------------------------SIDE BAR--------------------------------*/.sidebar{ position: fixed; top: 0; left: 0; height: 100%; width: 19%; padding: 10px 14px; background-color: #202023; transition: var(--tran-05); z-index: 100; } /*----------------------------------SIDEBAR HEADER--------------------------------*/.sidebar li{ height: 50px; list-style: none; display: flex; align-items: center; margin-top: 10px; }.sidebar header.image, .sidebar.icon{ min-width: 60px; border-radius: 6px; }.sidebar.icon{ min-width: 60px; border-radius: 6px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; }.sidebar.text, .sidebar.icon{ color: #FFF; transition: var(--tran-03); }.sidebar.text{ font-size: 17px; font-weight: 500; white-space: nowrap; opacity: 1; }.sidebar.menu{ margin-top: 40px; }.sidebar li a{ list-style: none; height: 100%; background-color: transparent; display: flex; align-items: center; height: 100%; width: 100%; text-decoration: none; transition: var(--tran-03); }.sidebar.menu-bar{ height: calc(100% - 55px); display: flex; flex-direction: column; justify-content: space-between; overflow-y: scroll; }.mode{ background-color: #303034; position: relative; transition: var(--tran-05); }.sun-moon i.sun, .mode-textL{ display: none; }.toggle-switch{ position: absolute; right: 0; height: 100%; min-width: 60px; display: flex; align-items: center; justify-content: center; border-radius: 0px; cursor: pointer; }.switch{ position: relative; height: 22px; width: 40px; border-radius: 0px; background-color: #000000; transition: var(--tran-05); }.button_switch{ background-color: #FFF; position: relative; padding: 1px; height: 70%; width: 40%; margin-top: 2.5px; margin-left: 2px; } /*-----------------------------------------------------------*/.home{ position: absolute; top: 0; top: 0; left: 250px; height: 100vh; width: calc(100% - 250px); background-color: var(--body-color); transition: var(--tran-05); }.home.text{ font-size: 30px; font-weight: 500; color: var(--text-color); padding: 12px 60px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <:----======== CSS ======== --> <link rel="stylesheet" href="stackoverflowExample.css"> <.----===== Boxicons CSS ===== --> <link href='https.//unpkg.com/boxicons@2.1:1/css/boxicons.min.css' rel='stylesheet'> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" charset="UTF-8"></script> <!--<title>Dashboard Sidebar Menu</title>--> </head> <body> <nav class="sidebar" id="id_sidebar"> <div class="bottom-content"> <li class=""> <a href="#"> <i class='bx bx-log-out icon' ></i> <span class="text nav-text">Logout</span> </a> </li> <li class="mode"> <div class="sun-moon"> <i class='bx bx-moon icon moon' id="id_moon_icon"></i> <i class='bx bx-sun icon sun' id="id_sun_icon"></i> </div> <div class="mode-text text" id="id_darkMode">Dark mode</div> <div class="mode-textL text" id="id_lightMode">Light mode</div> <div class="toggle-switch" id="id_toggle-switch"> <div class="switch" id="id_switch"> <div class="button_switch" id="id_button_switch"></div> </div> </div> </li> </div> </div> </nav> <script src="sidebar.js"></script> </body>
我提供了一個 JSFiddle 版本來查看完整內容： https://jsfiddle.net/sya1r8x6/
1 個解決方案
解決方案1
1 已采納 2023-01-21 10:28:22
div2.style.backgroundColor 返回 rgb 顏色，一個簡單的解決方案是將 #012342 替換為 rgb(1, 35, 66)
var button = document.getElementById("id_switch"); var div2 = document.getElementById("id_sidebar"); var div = document.getElementById("id_button_switch"); var div3 = document.getElementById("id_sun_icon"); var div4 = document.getElementById("id_lightMode"); var div5 = document.getElementById("id_moon_icon"); var div6 = document.getElementById("id_darkMode"); button.addEventListener("click", function() { if (div.style.marginLeft === "20px") { div.style.marginLeft = "2.5px"; } else { div.style.marginLeft = "20px"; }; }); button.addEventListener("click", function() { console.log(div2.style.backgroundColor); if (div2.style.backgroundColor === "rgb(1, 35, 66)") {//here is the change div2.style.backgroundColor = "#202023"; } else { div2.style.backgroundColor = "#012342"; }; }); button.addEventListener("click", function() { if (div3.style.display === "flex") { div3.style.display = "none"; } else { div3.style.display = "flex"; }; }); button.addEventListener("click", function() { if (div5.style.display === "none") { div5.style.display = "flex"; } else { div5.style.display = "none"; }; }); button.addEventListener("click", function() { if (div4.style.display === "flex") { div4.style.display = "none"; } else { div4.style.display = "flex"; }; }); button.addEventListener("click", function() { if (div6.style.display === "none") { div6.style.display = "flex"; } else { div6.style.display = "none"; }; });
/* Google Font Import - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } /*---------------------------------------------------------------------------------------------*/ body{ min-height: 100vh; /*background-color: rgb(30, 29, 29)*/; background-color: #000000; transition: var(--tran-05); } /*----------------------------------SIDE BAR--------------------------------*/.sidebar{ position: fixed; top: 0; left: 0; height: 100%; width: 19%; padding: 10px 14px; background-color: #202023; transition: var(--tran-05); z-index: 100; } /*----------------------------------SIDEBAR HEADER--------------------------------*/.sidebar li{ height: 50px; list-style: none; display: flex; align-items: center; margin-top: 10px; }.sidebar header.image, .sidebar.icon{ min-width: 60px; border-radius: 6px; }.sidebar.icon{ min-width: 60px; border-radius: 6px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; }.sidebar.text, .sidebar.icon{ color: #FFF; transition: var(--tran-03); }.sidebar.text{ font-size: 17px; font-weight: 500; white-space: nowrap; opacity: 1; }.sidebar.menu{ margin-top: 40px; }.sidebar li a{ list-style: none; height: 100%; background-color: transparent; display: flex; align-items: center; height: 100%; width: 100%; text-decoration: none; transition: var(--tran-03); }.sidebar.menu-bar{ height: calc(100% - 55px); display: flex; flex-direction: column; justify-content: space-between; overflow-y: scroll; }.mode{ background-color: #303034; position: relative; transition: var(--tran-05); }.sun-moon i.sun, .mode-textL{ display: none; }.toggle-switch{ position: absolute; right: 0; height: 100%; min-width: 60px; display: flex; align-items: center; justify-content: center; border-radius: 0px; cursor: pointer; }.switch{ position: relative; height: 22px; width: 40px; border-radius: 0px; background-color: #000000; transition: var(--tran-05); }.button_switch{ background-color: #FFF; position: relative; padding: 1px; height: 70%; width: 40%; margin-top: 2.5px; margin-left: 2px; } /*-----------------------------------------------------------*/.home{ position: absolute; top: 0; top: 0; left: 250px; height: 100vh; width: calc(100% - 250px); background-color: var(--body-color); transition: var(--tran-05); }.home.text{ font-size: 30px; font-weight: 500; color: var(--text-color); padding: 12px 60px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <:----======== CSS ======== --> <link rel="stylesheet" href="stackoverflowExample.css"> <.----===== Boxicons CSS ===== --> <link href='https.//unpkg.com/boxicons@2.1:1/css/boxicons.min.css' rel='stylesheet'> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" charset="UTF-8"></script> <!--<title>Dashboard Sidebar Menu</title>--> </head> <body> <nav class="sidebar" id="id_sidebar"> <div class="bottom-content"> <li class=""> <a href="#"> <i class='bx bx-log-out icon' ></i> <span class="text nav-text">Logout</span> </a> </li> <li class="mode"> <div class="sun-moon"> <i class='bx bx-moon icon moon' id="id_moon_icon"></i> <i class='bx bx-sun icon sun' id="id_sun_icon"></i> </div> <div class="mode-text text" id="id_darkMode">Dark mode</div> <div class="mode-textL text" id="id_lightMode">Light mode</div> <div class="toggle-switch" id="id_toggle-switch"> <div class="switch" id="id_switch"> <div class="button_switch" id="id_button_switch"></div> </div> </div> </li> </div> </div> </nav> <script src="sidebar.js"></script> </body>
CSS 在另一個 div 懸停時更改單獨 div 的背景顏色
[英]CSS change background color of seperate div when another div is hovered
點擊按鈕+點擊div后回調函數改變div顏色
[英]Call back a function to change the div color after click on button + click on div
jQuery單擊不同的div並更改顏色並重置其他div顏色
[英]jquery click different div and change color and reset the other div color
更改div類onclick在另一個div上，然后重新更改為主體單擊
[英]change div class onclick on another div, and change back on body click
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.