Как увеличить размер шрифта с помощью jQuery?

Question

Привет, я хочу изменить размер шрифта страницы поэтапно с помощью jQuery, как это сделать?

Что-то вроде:

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

Answer 1

Вы могли бы сделать так:

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

jsFiddle example here

Answer 2

Вы не можете сделать это так, что, поскольку Собственость шрифт хранится в виде строки, если вы уверены, что размер шрифта будет в пикселях вы могли бы сделать это следующим образом:

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

var fontInt = parseInt(fontSize) + 1; 

fontSize = fontInt + 'px'; 

Это может потребоваться немного изменить, я просто написал его без тестирования.

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'; 
     }); 
    }); 
}); 

Демонстрация: http://jsfiddle.net/ynhat/CeaqU/

Answer 4

Это может зависеть от того, какая версия JQuery, но я использовал следующий

HTML

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

КОД

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

Answer 5

использовать что-то вроде это

$(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

Будьте осторожны при использовании размеров непикселей. Использование кода Sylvain при синтаксическом анализе для int, когда размер шрифта равен 1.142857em, приведет к 2px!

ParseInt (1.142857em) == 1

1 + 1 + 'точек' == 2px

Answer 7

Вот пример того, как я сделал это с ползунком JQuery UI.

Пример 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

Попробуйте, как показано ниже:

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

Answer 10

Это решение использует проценты вместо точек, а также не требует размера, чтобы быть установлены или требуют заголовки стилей в 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