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

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

javascript jquery html css

Javascript 增加和减少div中所有元素的字体大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,通过在Webview控件中执行JavaScript，我正在为WindowsPhone8.1制作一个电子书阅读器。我需要帮助增加和减少在应用程序中的滑块将在HTML中执行JavaScript函数的变化字体大小我需要div‘reader’中的所有元素来增加和减少使用 JavaScript函数。现在的问题是我希望他们按比例增加差不多 function buttonclick() { document.getElementById("reader").style.transform = sc

通过在Webview控件中执行JavaScript，我正在为WindowsPhone8.1制作一个电子书阅读器。我需要帮助增加和减少在应用程序中的滑块将在HTML中执行JavaScript函数的变化字体大小

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

差不多

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

JS小提琴

谢谢你的帮助

项目的链接，以及js和css。尝试使用

尝试使用

试试这个代码。Html

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

示例在此站点中

请尝试此代码。Html

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

此站点中有示例

请尝试使用awesome JS libery call fittextjs

尝试使用令人敬畏的JS libery call fittextjs

试试这个。它会帮助你的

$function{ $crease.clickfunction{ $div.children.eachfunction{ var size=parseInt$this.cssfont-size；尺寸=尺寸+1+px； $this.css{ “字体大小”：字体大小 }; }; }; }; $function{ $decrease.clickfunction{ $div.children.eachfunction{ var size=parseInt$this.cssfont-size；尺寸=尺寸-1+px； $this.css{ “字体大小”：字体大小 }; }; }; }; .p{字体大小：12px} .div{font size:20px} .pre{font size:16px}

段落内容

Div内容预含量

试试这个。它会帮助你的

段落内容

Div内容预含量试试这个

试试这个

以下是一个简单的示例演示，您可以参考/使用：

$'.up'。单击，函数{ $'.content'。设置动画{ “字体大小”：“+=1” }; }; $'.down'。单击，函数{ $'.content'。设置动画{ “字体大小”：“-=1” }; }; 增长减少 Lorem ipsum dolor sit amet，是一位杰出的献身者。马蒂斯，我的生命结束了，我的生命结束了，我的生命结束了，我的生命结束了。不，我们的精英们，我们的共同利益，我们的共同利益。请不要把它放在老鼠身上。不要在生活中使用化学物质。这是一种非常好的方法。这是一只猫科动物，它坐在艾米特·朗卡斯·乌纳·莫莱斯蒂和莫里斯·布兰迪的椅子上，在欧盟的秃鹫之前。前庭耳垂门。埃尼安·坦帕斯·乌纳是利奥·阿库姆桑，在维韦拉

以下是一个简单的示例演示，您可以参考/使用：

它是否适用于div中的所有元素？不管它们的大小如何？如果您使用em或px，正如您在Demoried代码的codepen中所看到的，它只会增加缩放级别。对字体大小没有影响我明白了，会影响字体大小，不是吗？不，不会。它对div中的所有元素都有效吗？不管它们的大小如何？如果您使用em或px，正如您在Demoried代码的codepen中所看到的，它只会增加缩放级别。对字体大小没有影响我明白了，会影响字体大小吗？不，不会。你想使用JQuery功能吗？？我想这对你会更好，一切都好。只需要一个优雅的解决方案。你想使用JQuery函数吗？？我想这对你会更好，一切都好。只需要一个优雅的解决方案。如果我有多个元素在一个div div中具有多个字体大小，并且提供了fiddle中的ID reader，这将使它们达到相同的大小。如果我有多个元素在一个div div中具有多个字体大小，并且提供了fiddle中的ID reader，这将使它们达到相同的大小。嗨，Yash，我尝试使用你的答案。它不起作用。没有什么真正的意外你能看看google drive项目a吗

然后在那里试一试。我没有运气：/谢谢你，我不明白你想说的是？？我是说你的解决方案对我的项目不起作用。我的问题中有一个谷歌硬盘链接。请从那里获得项目并尝试实施它？嗨，Yash，我试着使用你的答案。它不起作用。没有什么真正的意外。你可以看看谷歌硬盘项目并在那里尝试一下。我没有运气：/谢谢你，我不明白你想说的是？？我是说你的解决方案对我的项目不起作用。我的问题中有一个谷歌硬盘链接。请从那里获取项目并尝试实施它？是的，但我需要通过不断调用函数来不断增加大小。不，对不起，这不起作用。主div中的元素大小不同，因此它们必须按比例增加。@Singhal2请尝试此jsfiddle。现在所有内部元素的大小也会增加。嗨，这看起来不错，但仍然有一个问题。图书馆的单片眼镜使整个页面放大。从有问题的google驱动程序链接下载整个文件夹，然后试着运行它。我将在手机上渲染webview，因此需要固定大小。是的，但我需要通过不断调用函数来不断增加大小。对不起，这不起作用。主div中的元素大小不同，因此它们必须按比例增加。@Singhal2请尝试此jsfiddle。现在所有内部元素的大小也会增加。嗨，这看起来不错，但仍然有一个问题。图书馆的单片眼镜使整个页面放大。从有问题的google驱动程序链接下载整个文件夹，然后试着运行它。我将在手机上呈现webview，因此需要固定大小。我已经检查过了。它不是用来处理多个大小的文本的。请看一下它的文档。我已经检查过了。它不适用于处理多个大小的文本。请查看它的文档

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

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