Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana wielkosci czionki - [JavaScript][PHP]
Forum PHP.pl > Forum > Przedszkole
airwick7
16.02.2013, 17:50:43
Witam, w internecie znalazlem dosc ciekawy skrypt zmiany rozmiaru czionki. Wyglada on tak

[PHP] pobierz, plaintext 
  1. <script type="text/javascript">
  2. function wielkosc(warstwa,coZmienic,rozmiar) {
  3. document.getElementById(warstwa).style[coZmienic] = rozmiar;
  4. }
  5. </script>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <div id="zmienna">TEKST</div>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. 	<select onchange="wielkosc('zmienna','fontSize',this.value)">
  2. <option value="13px">Standardowa czcionka</option>
  3. <option value="16px">Większa czcionka</option>
  4. <option value="17px">Największa czcionka</option>
  5. </select>
[PHP] pobierz, plaintext


Wszystko dziala jak najbardziej, z tym ze jest to w formie menu, a ja wolalbym w formie tekstowej typu -A / A+

[PHP] pobierz, plaintext 
  1. <a href="();">-A</a> 
  2. <a href="();">+A</a> 
[PHP] pobierz, plaintext


Jak to zrobic?
Szymciosek
16.02.2013, 17:53:37
Musisz pobrać po kliknięciu na +A przez JS, że została wykonana akcja, w ten akcji robisz powiedzmy "currentSize = currentSize + 3;" i dalej już w sumie tylko podmieniasz to co masz teraz zrobione.
airwick7
16.02.2013, 17:59:08
Wlasnie w tym problem ze nie wiem jak dokladnie to zrobic
s1518
16.02.2013, 18:00:17
Kod
<script type="text/javascript">

function wielkosc(warstwa,coZmienic,rozmiar) {

document.getElementById(warstwa).style[coZmienic] = rozmiar;

}

</script>
<div id="zmienna">TEKST</div>

<a href="#" onclick="wielkosc('zmienna','fontSize','20px')">wieksza</a>
<a href="#" onclick="wielkosc('zmienna','fontSize','8px')">mniejsza</a>
airwick7
16.02.2013, 18:03:56
Dzieki wielkie wink.gif
s1518
16.02.2013, 18:14:26
Albo lepiej tak, zeby nie osadzac zbednych atrybutow (plus wielokrotne powikszanie/pomniejszenie):

[HTML] pobierz, plaintext 
  1. <div id="zmienna">TEKST</div>
  2.  
  3. <a href="#" id="wieksza">wieksza</a>
  4. <a href="#" id="mniejsza">mniejsza</a>
  5.  
  6. <script type="text/javascript">
  7. var zmienna=document.getElementById('zmienna');
  8. var domyslna=10;  // domyslna wielkosc czcionki
  9. zmienna.style.fontSize=domyslna+'px'; 
  10.  
  11. document.getElementById('wieksza').onclick=function(){
  12.   domyslna+=4;  //o 4 wiekszksza
  13.   zmienna.style.fontSize=domyslna+'px';
  14.   return false;
  15. }
  16. document.getElementById('mniejsza').onclick=function(){
  17.   domyslna-=4;   //o 4 mniejsza
  18.   zmienna.style.fontSize=domyslna+'px';
  19. return false;
  20. }
  21. </script>
[HTML] pobierz, plaintext
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.