Foros del Web - Ver Mensaje Individual

Dany_s · #2 (**permalink**) 01/08/2011, 09:20

podés hacerlo más sencillo

Código HTML:

Ver original<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
    $( function() {
         var elementos = $('#bodyContent, #bodyContent *');
         aumento = 0;
 
         $('#increaseFont').click( function(){
             if (aumento < 4){
                elementos.css('font-size', '+=1');
                aumento++;
            }
         });
 
         $('#decreaseFont').click( function(){
             if (aumento > 0){
                elementos.css('font-size', '-=1');
                aumento--;
            }
         });
 
    });
    </script>
</head>
<body>
    Tamaño: <a href="#" id="increaseFont">+</a> | <a href="#" id="decreaseFont">-</a>
<div id="bodyContent">
<h1 class="title">Titulo con un font size</h1>
<p>Parrafos</p>
<h1>Otro encabezado con distinto tamaño de fuente</h1>
Ul li, tables... etc
</div>
 
</body>
</html>

la seleccion $('#bodyContent, #bodyContent *')
#bodyContent para el texto que esté dentro del div y #bodyContent * para todos los elementos hijos de #bodyContent

aumento = 0 para saber cuantos click hicieron al incrementar o decrementar
si querés que aumenten sólo 4 pixeles con un condicional
y en el parámetro del valor de la funte es incrementar el valor actual en 1

Código Javascript:

Ver originalif (aumento < 4){
                elementos.css('font-size', '+=1');
                aumento++;
            }

y para disminuir

Código Javascript:

Ver originalif (aumento > 0){
                elementos.css('font-size', '-=1');
                aumento--;
            }

cuando está en 0 tiene el valor original

se supone que en pixeles pero podes usuar cualquiera