Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] przycisk włączający i wyłączający funkcję
Forum PHP.pl > Forum > Przedszkole
lolarz
9.07.2015, 10:03:01 
[HTML] pobierz, plaintext 
  1. <script>
  2. function test() {
  3. document.getElementById('box').style.width="100px";
  4. document.getElementById('box').style.height="100px";
  5. }
  6. </script>
  7.  
  8. <div id="box" width="50px" height="50px"></div>
  9. <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
kafowi
9.07.2015, 12:15:26
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
9.07.2015, 12:35:38
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
9.07.2015, 12:38:22
Albo jeśli masz jQ to http://jsfiddle.net/pnbx584w/2/
Comandeer
9.07.2015, 12:51:37
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
9.07.2015, 15:04:13
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.