¿Cómo incrementar los cambios de tamaño de fuente con jQuery?

Question

Hola, quiero cambiar el tamaño de fuente de la página de forma incremental con jQuery, ¿cómo hago eso?

Algo así como:

$('body').css({'font-size':'+.01px'}); 
$('body').css({'font-size':'-.01px'}); 

Answer 1

Se podía hacerlo:

var fontSize = parseInt($("body").css("font-size")); 
fontSize = fontSize + 1 + "px"; 
$("body").css({'font-size':fontSize}); 

jsFiddle example here

Answer 2

No se puede hacer así porque el hotel fenomenal fuente se almacena como una cadena, si está seguro el tamaño de letra será en píxeles que podría hacerlo de esta manera:

var fontSize = $('body').css('font-size').split('px')[0]; 

var fontInt = parseInt(fontSize) + 1; 

fontSize = fontInt + 'px'; 

Eso podría necesitar modificarlo ligeramente. Simplemente lo escribí sin probarlo.

Answer 3

HTML

<input id="btn" type="button" value="Increase font" /> <br /> 
<div id="text" style="font-size:10px">Font size</div> 

Javascript

$(document).ready(function() { 
    $('#btn').click(function() { 
     $('#text').css("font-size", function() { 
      return parseInt($(this).css('font-size')) + 1 + 'px'; 
     }); 
    }); 
}); 

Demostración: http://jsfiddle.net/ynhat/CeaqU/

Answer 4

Se podría depender de la versión de jQuery, pero he utilizado el código HTML siguiente

<input type="button" id="button" /> 
<div id="box"></div> 

CÓDIGO

$(document).ready(function() { 
    $("#button").click(function() { 
    $("#box").css("width","+=5"); 
    }); 
}); 

Answer 5

usar algo como

$(document).ready(function() { 
    $('id or class of what input').click(function() { 
     $('div, p, or span of what font size your increasing').css("font-size", function() { 
      return parseInt($(this).css('font-size')) + 1 + 'px'; 
     }); 
    }); 
}); 

Answer 6

Tenga cuidado al usar tamaños de fuente que no sean de px. Usar el código de Sylvain al analizar un int cuando el tamaño de fuente es 1.142857em resultaría en 2px.

parseInt (1.142857em) == 1

1 + 1 + 'px' == 2px

Answer 7

Aquí está un ejemplo de cómo lo hice con el control deslizante jQuery UI.

Ejemplo here

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="text"> 
     <h1>Hello, increase me or decrease me!</h1> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div id="mySlider"></div> 
    </div> 
    </div> 
</div> 

CSS:

.text h1 { 
    color: #333; 
    font-family: Arial, sans-serif; 
    font-size: 30px; 
} 

JS:

$("#mySlider").slider({ 
    range: "min", 
    min: 30, 
    max: 70, 
    slide: function(e, u) { 
    $(".text h1").css("font-size", u.value + "px"); // We want to keep 30px as "default" 
    } 

}); 

Answer 8

$(document).ready(function() { 

     var i = 15; 

     $("#myBtn").click(function() { 
      if (i >= 0) { 
      i++ 
       var b = $("#myText").css({"background-color": "yellow", "font-size": i}) 

      } 
     }) 
//If you want to decrease it too 
     $("#myBtn2").click(function() { 
      if (i <= 500) { 

       i-- 
      var b = $("#myText").css({"background-color": "yellow", "font-size": i}) 

      } 
     }) 
    }) 

Answer 9

Trate como el siguiente:

jQuery("body *").css('font-size','+=1'); 

Answer 10

Esta solución utiliza porcentajes en lugar de utilizar px y tampoco requiere el tamaño para ser establecer o exigir conectores de estilo en el código HTML.

HTML:

<p>This is a paragraph.</p> 
<button id="btn">turn up</button> 

jQuery:

var size = "100%"; 
$("#btn").click(function() { 
size = parseFloat(size)*1.1+"%";// multiplies the initial size by 1.1 
    $("p").css("fontSize", size);// changes the size in the CSS 
}); 

Working jsfiddle here