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

Question

こんにちは、jQueryを使ってページのフォントサイズを段階的に変更したいのですが、どうすればいいですか？

ような何か：あなたは、フォントサイズは、あなたがこのようにそれを行うことができ、画素になると確信していた場合、フォントproperyは、文字列として保存されているので、あなたがそのようにそれを行うことはできません

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

Answer 1

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

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

jsFiddle example here

Answer 2

：

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

var fontInt = parseInt(fontSize) + 1; 

fontSize = fontInt + 'px'; 

少し修正する必要があるかもしれませんが、私はテストなしで書きました。

Answer 3

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/

Answer 4

それはjqueryののバージョンに依存する場合がありますが、私は次のよう

HTML

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

CODE

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

Answer 5

使用して、のようなものを使用していますこの

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

Answer 6

フォントサイズが1.142857emの場合、intの解析時にシルヴァインのコードを使用すると、2pxになります。

のparseInt（1.142857em）== 1

1 + 1 + 'PX' == 2ピクセル

Answer 7

は、ここで私はjQueryのUIのスライダーでそれをやった方法の例です。

例here

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

}); 

Answer 8

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

      } 
     }) 
    }) 

Answer 9

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

Answer 10

このソリューションのパーセンテージを使用して代わりのピクセルを使用しても設定されるようにサイズを必要とするか、または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 
}); 

Working jsfiddle here