Ετικέτα: JavaScript

Κάποτε ήταν ένα τετράγωνο
<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>