it-swarm.com.de

Wie kann ich mit jQuery die Schriftgröße inkrementieren?

Hallo, ich möchte die Schriftgröße der Seite inkrementell mit jQuery ändern. Wie mache ich das?

So etwas wie:

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

Sie könnten dies tun:

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


jsFiddle Beispiel hier

31
Sylvain

Dies ist nicht möglich, da die Schriftart als Zeichenfolge gespeichert ist. Wenn Sie sicher sind, dass die Schriftgröße in Pixel angegeben wird, können Sie dies folgendermaßen tun:

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

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

Das muss vielleicht leicht modifiziert werden. Ich habe es gerade geschrieben, ohne es zu testen.

5
jcvandan

Es hängt möglicherweise von der Version von jquery ab, aber ich habe Folgendes verwendet

HTML

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

CODE

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

Seien Sie vorsichtig, wenn Sie Nicht-PX-Schriftgrößen verwenden - Wenn Sie Sylvains Code zum Parsen eines Int verwenden, wenn die Schriftgröße 1.142857 ist, würde dies 2px ergeben!

parseInt (1.142857em) == 1

1 + 1 + 'px' == 2px

1
nickgeorgiou

Verwenden Sie so etwas

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

Versuchen Sie wie folgt:

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

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

Demo: http://jsfiddle.net/ynhat/CeaqU/

1
YNhat

Bei dieser Lösung werden Prozentsätze anstelle von px verwendet. Außerdem muss weder die Größe noch die Formatüberschriften im HTML festgelegt werden.

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

Jsfiddle hier arbeiten

0
BrettC

Hier ist ein Beispiel, wie ich es mit dem jQuery UI-Schieberegler gemacht habe.

Beispiel hier

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

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

            }
        })
    })
0
Imroz Khan