Question

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

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

像

这样的东西

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

这是一个简单的最小样本演示，您可以参考/使用：

//Read
YourClass persisted = mapper.readValue("path_to_file", YourClass.class);

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

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

尝试使用percentual values。

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

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

6 个答案: