[JavaScript] przycisk włączający i wyłączający funkcję Opcje

[lolarz]

[HTML] pobierz, plaintext 
<script>
function test() {
document.getElementById('box').style.width="100px";
document.getElementById('box').style.height="100px";
}
</script>
 
<div id="box" width="50px" height="50px"></div>
<button onclick="test()"></button>
[HTML] pobierz, plaintext 

Czy jest jakiś sposób, aby po kliknięciu przycisku włączała się funkca test, a po ponownym kliknięciu w przycisk, div wracałby do stanu poprzedniego (width,height = 50px)?
Czyli:
1 kliknięcie - div zmienia wysokość i szerokosć na 100px
2 kliknięcie - div zmienia wysokość i szerokość na 50px

Ten post edytował lolarz 9.07.2015, 11:10:28

[kafowi]

Wystarczy tylko intrukcja warunkowa.

Kod

<script>
function test() {
  if(document.getElementById('box').style.width=="50px")
    {
      document.getElementById('box').style.width="100px";
      document.getElementById('box').style.height="100px";
    }
  else
  {
      document.getElementById('box').style.width="50px";
      document.getElementById('box').style.height="50px";
  }

}
</script>

[PrinceOfPersia]

Lepiej to zrobić na klasach CSS, a JavaScriptem wyłączać i włączać klasę. Bardziej przejrzyście będzie.
http://jsfiddle.net/pnbx584w/1/

Ten post edytował PrinceOfPersia 9.07.2015, 12:36:58

[Pyton_000]

Albo jeśli masz jQ to http://jsfiddle.net/pnbx584w/2/

[Comandeer]

Warto też zauważyć, że jeśli nie musimy się przejmować IE < 10 to zamiast zabawy z cięciem elem.className można zastosować elem.classList.toggle: http://jsfiddle.net/Comandeer/fqyn023b/

[lolarz]

Wszystko działa, dzięki wszystkim za pomoc