Как уменьшить размер шрифта с помощью .css()

Question

У меня есть jsFiddle здесь - http://jsfiddle.net/pbkt3nrx/1/ - где я хочу уменьшить размер шрифта элемента html на 5% при каждом нажатии кнопки «Сжатие». Но первый щелчок уменьшает размер шрифта с 62,5% (10 пикселей) до 5 пикселей. Есть ли способ сделать это?

Благодаря

$(function(){ 
    $('button#shrink').mousedown(function() { 
      $('html').css('font-size', '-=5%'); 
     }); 
}); 

Answer 1

Ваш код также correct.your текущего размера 10 точек и вы уменьшаете на 5 px.so это причина исчезает после 2 клика.

Попробуйте это: за счет уменьшения размера путем 1px

$(function(){ 
    $('button#shrink').mousedown(function() { 
     curSize= parseInt($('html').css('font-size')) -1; 
     //here parseInt will remove px from 10px ,final value would be only 10 
     $('html').css('font-size', curSize); 
         }); 
}); 

http://jsfiddle.net/pbkt3nrx/2/

Answer 2

Попробуйте

$(function(){ 
    $('button#shrink').mousedown(function() { 
      font = parseInt($("html").css("font-size")); //Get current font-size 
      font = font-1; //Decrease font-size by 1 
      $('html').css('font-size', font); //Apply new font-size to current font-size 
     }); 
}); 

JSFiddle

Answer 3

это должно работать http://jsfiddle.net/pbkt3nrx/5/

$(function() { 
var shrinks = 0; 
$('button#shrink').mousedown(function() { 
    var currentHeight = $('html').css('font-size'); 
    currentHeight = currentHeight.substring(0,currentHeight.length-2); 
    shrinks++; 
    console.log(currentHeight); 
    $('html').css('font-size', +62.5-5*shrinks + '%'); 
}); 
});