Κάποτε ήταν ένα τετράγωνο
<div></div>
Είχε πλευρές 200 pixels και κόκκινο χρώμα
<div style="width: 200px; height: 200px; background: red;"></div>
Το όνομά του ήταν demo
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
Όταν του έκανες κλικ, πρασίνιζε
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.background="green";
}
</script>
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
<script>
document.getElementById("demo").onclick = function() {
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>
Και δε βιαζόταν…
<div id="demo" style="width: 200px; height: 200px; background: red;"></div>
<script>
document.getElementById("demo").onclick = function() {
document.getElementById("demo").style.transition = "all 2s";
if (document.getElementById("demo").style.background=="red") {
document.getElementById("demo").style.background="green";
} else if (document.getElementById("demo").style.borderRadius!="100px") {
document.getElementById("demo").style.borderRadius="100px";
} else {
document.getElementById("demo").style.background="red";
document.getElementById("demo").style.borderRadius="0px";
}
}
</script>
