web-dev-qa-db-ja.com

jQueryでフォントサイズの変更を増やす方法は？

こんにちはjQueryを使用してページのフォントサイズを段階的に変更する方法を教えてください。

何かのようなもの：

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

あなたはそうすることができます：

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


jsFiddleの例

34
Sylvain

フォントプロパティは文字列として保存されるため、このようにすることはできません。フォントサイズがピクセル単位であることが確実な場合は、次のように実行できます。

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

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

少し変更する必要があるかもしれませんが、テストせずに書いただけです。

8
jcvandan

Jqueryのバージョンに依存するかもしれませんが、私は以下を使用しました

[〜＃〜] html [〜＃〜]

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

[〜＃〜]コード[〜＃〜]

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

Px以外のフォントサイズを使用するときは注意してください。font-sizeが1.142857emのときにintを解析するときにSylvainのコードを使用すると、2pxになります。

parseInt（1.142857em）== 1

1 + 1 + 'px' == 2px

1
nickgeorgiou

このようなものを使う

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

以下としてお試しください：

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

デモ： http://jsfiddle.net/ynhat/CeaqU/

1
YNhat

このソリューションでは、pxを使用する代わりにパーセンテージを使用し、サイズを設定したり、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
});

ここで動作しているjsfiddle

0
BrettC

以下は、jQuery UIスライダーを使用して実行した方法の例です。

例 ここ

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