Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] przycisk włączający i wyłączający funkcję
Forum PHP.pl > Forum > Przedszkole
lolarz
  1. function test() {
  2. document.getElementById('box').style.width="100px";
  3. document.getElementById('box').style.height="100px";
  4. }
  5.  
  6. <div id="box" width="50px" height="50px"></div>
  7. <button onclick="test()"></button>


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
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/
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 smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.