增加和减少div中所有元素的字体大小

Question

我正在通过在Webview控件中执行JavaScript来为Windows Phone 8.1创建电子书阅读器。 我需要在更改应用程序中的滑块时增加和减小字体大小的帮助，这将在HTML中执行JavaScript函数。

我需要使用JavaScript函数增加和减少div'reader'内部的所有元素。 现在的问题是我希望它们按比例增加。

就像是

function buttonclick()
{
    document.getElementById("reader").style.transform = scale(0.8, 0.8);
}

JS小提琴http://jsfiddle.net/0vz43waw/

任何帮助表示赞赏，谢谢

该项目的链接，以及js和CSS。 https://drive.google.com/drive/folders/0B149D3iLIyumam1JTlNLNmdoaW8?usp=sharing

Answer 1

这是您可以参考/使用的简单的最小示例演示：

 $('.up').on('click', function() { $('.content').animate({ 'font-size': '+=1' }); }); $('.down').on('click', function() { $('.content').animate({ 'font-size': '-=1' }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="up">Increase</button></br> <button class="down">Decrease</button> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis, tellus id bibendum finibus, elit est malesuada mi, eget dictum turpis nisl ac mauris. Nam auctor elit ut ipsum rutrum, ut molestie erat cursus. Donec convallis mattis neque ut placerat. Donec molestie mi vitae velit cursus, in accumsan lorem sollicitudin. Fusce nec risus ac lectus dictum rutrum ac vitae est. Nullam consectetur placerat felis, sit amet rhoncus urna molestie et. Mauris blandit accumsan ante eu vulputate. Vestibulum eget porta lectus. Aenean tempus urna a leo accumsan, at viverra ex semper.</p> </div> 

Answer 2

尝试这个。 会帮你的

 $(function() { $("#increase").click(function() { $("div").children().each(function() { var size = parseInt($(this).css("font-size")); size = size + 1 + "px"; $(this).css({ 'font-size': size }); }); }); }); $(function() { $("#decrease").click(function() { $("div").children().each(function() { var size = parseInt($(this).css("font-size")); size = size - 1 + "px"; $(this).css({ 'font-size': size }); }); }); }); 

 .p{ font-size:12px } .div{ font-size:20px } .pre{ font-size:16px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="increase" value="Increase"> <input type="button" id="decrease" value="Decrease"> <div id="maindiv"> <p class='p'>Paragraph Content</p> <div class='div'>Div Content</div> <pre class='pre'>Pre Content</pre> </div> 

编码愉快。

Answer 3

尝试使用百分比值 。

.element {
  font-size: 110%;
}

Answer 4

试试这个代码。 HTML

<div>The text in <span>12</span>px: this is the size</div>
<br>
<br>
<input type="range" min="10" max="40">

的JavaScript。

$('input').on('change', function () {
var v = $(this).val();
$('div').css('font-size', v + 'px')
$('span').html(v);
});

示例在此站点http://jsfiddle.net/vNfh2/1/

Answer 5

尝试使用很棒的JS libery调用fittextjs

fittextjs

Answer 6

试试这个jsfiddle

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div id='reader'>The text in <span>12</span>px: this is the size</div>
    <br>
    <br>
    <p id='size' style='display:none'>16</p>
    <input type='button' id='button1' value='Increase Size' />
    <input type='button' id='button2' value='Decrease Size' />

    $('#button1').click(function(){
      var size= parseInt($('#size').text());
      size=size+1;
      $('#size').text(size);
      $('#reader').css('font-size',size+'px');
   });
   $('#button2').click(function(){
      var size= parseInt($('#size').text());
      size=size-1;
      $('#size').text(size);
      $('#reader').css('font-size',size+'px');
   });