我希望能够通过单击按钮来切换两个 div 的背景颜色
[英]I want to be able to toggle the background color of the two divs with a button click
问题描述
我无法让 backgroundColorRed 和 backgroundColorBlue 使用指定的按钮正确切换 div 的背景。 有没有办法只通过单击按钮来更改 div 的背景颜色，如果单击按钮，两者应该能够同时变为红色和蓝色。 我想用 css 来改变颜色，这就是为什么我在 css 中包含了两个背景 styles。
var $ = function(id) { return document.getElementById(id); }; var backgroundColorRed = function(){ var div1Background = document.getElementById("div1"); var changeRed = document.getElementById("divButton1"); changeRed.addEventListener('click', function(){ document.body.classList.toggle("backgroundColorRed"); }) } var backgroundColorBlue = function(){ var div1Background = document.getElementById("div2"); var changeRed = document.getElementById("divButton2"); changeRed.addEventListener('click', function(){ document.body.classList.toggle("backgroundColorBlue"); }) } window.onload = function(){ $("divButton1").onclick = backgroundColorRed; $("divButton2").onclick = backgroundColorBlue; }
.backgroundColorRed{ background-color: red; }.backgroundColorBlue{ background-color: blue; }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles,css"> </head> <body> <main> <section id="section1"> <div id="div1"> <h2>Div One</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Perspiciatis magni reprehenderit quibusdam ipsam eius odit iste consequatur necessitatibus voluptatibus deserunt maxime esse, similique. cupiditate facere quis quos id delectus est,</p> </div> <div id="div2"> <h2>Div Two</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Autem magni voluptatibus tempore aut corrupti. ducimus optio consequuntur, Quasi debitis a dicta natus voluptas alias ea, quis excepturi ut. eius accusantium.</p> </div> </section> <section id="section2"> <button type="button" id="divButton1">Div1 Red</button> <button type="button" id="divButton2">Div2 Blue</button> </section> </main> <script src="main.js"></script> </body> </html>
2 个解决方案
解决方案1
1 2020-04-05 21:53:25
addEventListener只需要一次：
const $ = document.getElementById.bind(document); function backgroundColorRed() { $("div1").classList.toggle("backgroundColorRed"); } function backgroundColorBlue() { $("div2").classList.toggle("backgroundColorBlue"); } window.onload = function () { $("divButton1").addEventListener("click", backgroundColorRed); $("divButton2").addEventListener("click", backgroundColorBlue); }
.backgroundColorRed{ background-color: red; }.backgroundColorBlue{ background-color: blue; }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles,css"> </head> <body> <main> <section id="section1"> <div id="div1"> <h2>Div One</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Perspiciatis magni reprehenderit quibusdam ipsam eius odit iste consequatur necessitatibus voluptatibus deserunt maxime esse, similique. cupiditate facere quis quos id delectus est,</p> </div> <div id="div2"> <h2>Div Two</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Autem magni voluptatibus tempore aut corrupti. ducimus optio consequuntur, Quasi debitis a dicta natus voluptas alias ea, quis excepturi ut. eius accusantium.</p> </div> </section> <section id="section2"> <button type="button" id="divButton1">Div1 Red</button> <button type="button" id="divButton2">Div2 Blue</button> </section> </main> <script src="main.js"></script> </body> </html>
解决方案2
1 已采纳 2020-04-05 21:54:46
这能解决您的问题吗？
var $ = function(id) { return document.getElementById(id); } window.onload = function() { $("divButton1").addEventListener('click', function() { $("div1").classList.toggle("backgroundColorRed"); }) $("divButton2").addEventListener('click', function() { $("div2").classList.toggle("backgroundColorBlue"); }) }
.backgroundColorRed { background-color: red; }.backgroundColorBlue { background-color: blue; }
<main> <section id="section1"> <div id="div1"> <h2>Div One</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis magni reprehenderit quibusdam ipsam eius odit iste consequatur necessitatibus voluptatibus deserunt maxime esse, similique, cupiditate facere quis quos id delectus est.</p> </div> <div id="div2"> <h2>Div Two</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magni voluptatibus tempore aut corrupti, ducimus optio consequuntur. Quasi debitis a dicta natus voluptas alias ea, quis excepturi ut, eius accusantium.</p> </div> </section> <section id="section2"> <button type="button" id="divButton1">Div1 Red</button> <button type="button" id="divButton2">Div2 Blue</button> </section> </main>
我想更改一次按钮的背景色，一旦我单击另一个按钮就再次更改为原始颜色
[英]i want to change the background color of a button once clicked and change again to original color once i click another button
单击交换按钮时，如何使红色div更改背景颜色以在红色和绿色之间切换？
[英]How do I get my red div to change background color to toggle between red and green when I click on the swap button?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.