我正在通過在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
嘗試使用percentual values。
.element {
font-size: 110%;
}
試試這段代碼。 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