Comment incrémenter les changements de taille de police avec jQuery?

Salut, je veux changer la taille de la police de la page de façon incrémentale avec jQuery comment dois-je faire?

Quelque chose comme:

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

source d'informationauteur Alfred

  1. 31

    Vous pouvez le faire :

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


    jsFiddle exemple ici

  2. 5

    Vous ne pouvez pas le faire comme ça parce que la police propery est stocké sous forme de chaîne, si vous êtes sûr de la taille de la police en pixels que vous pourriez faire comme ceci:

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

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

    Qu'il pourrait être nécessaire de modifier légèrement je viens d'écrire sans test.

  3. 4

    Il peut dépendre de la version de jquery, mais j'ai utilisé les suivants

    HTML

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

    CODE

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

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

    Démo: http://jsfiddle.net/ynhat/CeaqU/

  5. 1

    Utiliser quelque chose comme cela

    $(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';
        });
    });
});
  6. 1

    Être prudent lors de l'utilisation de la non-px tailles de police -- à l'Aide de Sylvain code lors de l'analyse d'un int lorsque la taille de police est 1.142857 em entraînerait 2px!

    parseInt(1.142857 em) == 1

    1 + 1 + 'px' == 2px

  7. 1

    Essayer comme ci-dessous:

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

    Voici un exemple de la façon dont je l'ai fait avec jQuery UI slider.

    Exemple ici

    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"
  }

});
  9. 0
        $(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})

            }
        })
    })
  10. 0

    Cette solution utilise les pourcentages au lieu d'utiliser px et ne nécessite pas la taille de définir ou exiger le style des en-têtes dans le code 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
});

    Travail jsfiddle ici