Cambio di colore con un click

**Vincent.Zeno** · 17-11-2017, 22:15

e dagli... cos'è "il quadrato"?

**Lucafarnese** · 17-11-2017, 22:41

Un quadrato 100x100px che cambi colore premendo un bottone. Quello intendo per "il quadrato"

**Lucafarnese** · 17-11-2017, 22:50

Tipo questo ma dovrebbe poter tornare verde

codice:

<html><head>
    <title> Div, class, id </title>
    <link rel="stylesheet" href="stylesheets/style.css"/>


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


<style>
body {
color: #a280e2;
font: 1.2em/1.4em 'Myriad Pro', Helvetica, Arial, Sans-serif,;
text-align: left;
margin: 0px;
}




.yellow {
background: yellow;
margin: 100 auto;
padding: 20px; 
width: 100px;
height: 100px;
}


.green {
background: green;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}


#Blue {
background: #2700ff;
margin: 100 auto;
padding: 20px; 
width: 100px;
height: 100px; 
}


#Red {
background: #ff0000;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}
</style>


<script>
$( document ).ready(function() {
console.log( "ready!" );
$( "#Blue" ).click(function() {
$('#Blue').css('background-color', 'yellow');
alert( "Color Changed" );
});
$( "#Red" ).click(function() {
$('#Red').css('background-color', 'green');
alert( "Color Changed" );
});
});


</script>




</head>
<body> 


    <div id="Blue" class="yellow"></div>
    <div id="Red" class="Green"></div>
</body>
</html>

**Vincent.Zeno** · 17-11-2017, 23:25

codice:

<!DOCTYPE html><html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#mioDIV").toggleClass("redBG");
    });
});
</script>


<style type="text/css">
#mioDIV { width:100px; height:100px; }
.greenBG { background:green; }
.redBG { background:red; }
/* IMORTANTE! la classe redBG va definita DOPO greenBG */
</style>

</head>


<body>


<div id="mioDIV" class="greenBG"></div>
<button>Toggle class for element</button>


</body>
</html>

**Lucafarnese** · 17-11-2017, 23:45

Ok grazie mille, scusa so che sono noioso ma vorrei solo capire... per metterne più di uno come posso fare? Se creo più div e premo uno dei bottoni, attivano tutti il primo...

EDIT: Sono riuscito da solo grazie mille

Discussione: Cambio di colore con un click

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio