增加和减小div内所有元素的字体大小
我正在通过在Webview控件中执行JavaScript为Windows Phone 8.1制作电子书阅读器。我需要帮助增加和减少应用程序中的滑块更改字体大小，这将在HTML中执行JavaScript函数。增加和减小div内所有元素的字体大小
我需要使用 JavaScript函数来增加和减少div'阅读器'内部的所有元素。现在的问题是我希望他们按比例增加。
喜欢的东西
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
试试这段代码。 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/
如果我有一个div中有多个字体大小的多个元素（div提供ID提供的ID阅读器），这会使它们具有相同的大小。 – Singhal2
http://jsfiddle.net/j08691/P6ExK/你可以试试这个 –
试试这个。它会帮助你
$(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>快乐编码....
试试这个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');
});
下面是一个简单的最少的样品演示，你可以参考/用途：
$('.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>
你愿意去的jQuery功能？我认为这会对你更好。 –
一切都很好。只需要一个优雅的解决方案 – Singhal2