[英]How to switch between two different colors with one button using javascript
我嘗試使用JavaScript單擊事件偵聽器時嘗試在兩種顏色之間切換。 當我觸發click事件時，它將顏色更改為黑色。 當我再次單擊它時，我希望它改回到默認值，即白色。 我認為涉及if語句，但是我不確定在這種情況下邏輯將如何工作。
<!DOCTYPE html>
<html>
<head>
<title>Light Switch</title>
<link rel="stylesheet" href="light.css" />
</head>
<body id="body">
<button id="submit">Submit
<label id="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</button>
<script src="light.js"></script>
</body>
</html>
function start() {
var submit = document.getElementById("submit");
submit.addEventListener("click", toggle);
};
function toggle() {
var color = document.getElementById("body");
color.style.backgroundColor = "black";
};
start();
您可以在該元素的classList上使用toggle功能。 添加一個類並切換它。
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); color.classList.toggle('black'); }; start();
.black { background-color: black; }
<body id="body"> <button id="submit">Submit <label id="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </button> </body>
您也可以只檢查當前顏色並每次切換。
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); var backColor = color.style.backgroundColor; color.style.backgroundColor = backColor === "black" ? "white" : "black"; }; start();
<body id="body"> <button id="submit">Submit <label id="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </button> </body>
您可以創建CSS類，然后使用classList屬性將其添加/刪除到元素中，而無需操縱backgroundColor 。
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); color.classList.toggle("black"); }; start();
.black { background-color: black; }
<div id="body"> <button id="submit">Submit <label id="switch"> <input type="checkbox" checked> <span class="slider"></span> </label> </button> </div>
這樣做，我認為它對您有用...
var background = document.getElementById(id).style.background;
var btn = addEventListener("click", function (){
if(background = "rgb(255,145,0)"){
document.getElementById(id).style.background = "red";
}
else
{
document.getElementById(id).style.background = "white";
}
});
function start() { var submit = document.getElementById("submit"); submit.addEventListener("click", toggle); }; function toggle() { var color = document.getElementById("body"); if(color.style.backgroundColor==='black') color.style.backgroundColor=''; else color.style.backgroundColor = "black"; }; start();
如何使用JavaScript一鍵切換兩種背景顏色
[英]How to change between 2 background colors using JavaScript with one button
如何使用 js setinterval() 在兩種背景顏色之間切換
[英]How can I switch between two background-colors using js setinterval()
如何使用切換大小寫在javascript中找到兩個數字之間的最大值？
[英]How to find maximum between two numbers in javascript using switch case?
使用javascript單擊按鈕時如何在兩個不同的功能之間切換？
[英]How to toggle between two different functions when a button is clicked using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.