De hecho, tengo 2 cajas, id llamada box1 y box2.
Estoy usando J-query.
Mi diseño:
Haga clic en box1 => marque el color de fondo de box2, si es negro, cámbielo a blanco, de lo contrario, cambie a negro.
Mi código duro:
<body> <div id="box1"></div> <div id="box2"></div> </body> $( document ).ready(function() { $("#box1").click(function(){ if ($('#box2').css({backgroundColor: 'white'})) { $('#box2').css({backgroundColor: 'black'}); } else { $('#box2').css({backgroundColor: 'white'}); } }); });Como verá en el fragmento aquí, jQuery informa el valor RGB de la celda para su color de fondo. Es mucho más fácil usar clases para este tipo de cosas. en este caso, solo puede usar toggleClass()
Además, para que conste, su declaración IF estaba mal formada:
if ($('#box2').css({backgroundColor: 'white'})) {debiera ser
if ($('#box2').css('background-color') == 'white') { ... pero fallaría porque en realidad es rgb(255, 255, 255) , no white
$(document).ready(function() { $("#box1").click(function() { console.log('The background color of box 2 is: ', $('#box2').css('background-color')) $("#box2").toggleClass('black'); }); }); div { padding: 10px; display:inline-block; margin-right:10px; border: 1px solid #ccc; background-color: white; } .black { background-color: black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box1"></div> <div id="box2"></div>