Chaque clic Je veux augmenter la taille de la police en utilisant jquery

Question

Pour chaque clic, je veux augmenter la taille de la police.

$('#fontplus').each(function('click') { 
    var fs = $('#bod').css('font-size'); 
    $('#bod').css('font-size',fs+1); 

}); 

<div id="fontplus">+</div> 

Merci Jean

Answer 1

Eh bien, comme vous avez probablement découvert, cela ne fonctionnera pas.

$('#fontplus').click(function() { 
    var fs = $('#bod').css('fontSize'); 

Maintenant, vous avez la taille de police actuelle. Cependant, qu'est-ce que c'est? Est-ce "12px"? Ou peut-être c'est "1.5em"? Eh bien, en supposant que vous contrôlez que, ce que vous devez faire est de démonter le réglage actuel, puis mis en place la nouvelle valeur:

$('#bod').css('fontSize', (parseInt(fs, 10) + 1) + 'px'); 
}); 

Answer 2

var bod; 
    var fontPlus; 
    $(document).ready(function() { 
     bod = $('#bod'); 
     fontPlus = $('#fontPlus'); 
     fontPlus.click(function() { 
     var fontSize = bod.css('font-size'); 
     var fontSizeNum = parseFloat(fontSize, 10); 
     bod.css('font-size', fontSizeNum * 1.2); 
     }); 
    }); 

plus d'informations et des exemples here

Answer 3

Vous devez gérer l'événement clic:

$('#fontplus').click(function() { 
    var fs = $('#bod').css('font-size'); 
    $('#bod').css('font-size',fs+1); 
}); 

Vous devez définir le font- initial taille en CSS à une valeur entière.

Answer 4

Voulez-vous réellement qu'ils soient en mesure de le faire à l'infini? Je suggère d'avoir 3 ou 4 classes CSS différentes pour représenter chaque taille de police disponible et la gérer avec jQuery.

Les autres exemples ne considèrent même pas les unités utilisées! Points? Pixels? .css ("font-size") retournera cela, donc faire un ++ ne marchera pas.

$("#fontplus").click(function() { 
    switch($("#bod").attr("className")) 
    { 
     case "large" : /* do nothing */ break; 
     case "medium" : $("#bod").removeClass("medium").addClass("large"); break; 
     /* do as needed */ 
    } 
}); 

et j'aurais chaque look classe comme css:

.large { font-size: 1.4em; } 
.medium { font-size: 1.2em; } 
.normal { font-size: 1em; } 
.small { font-size: .8em; }