我在编写一个字体大小增加/减少的jQuery函数时遇到了问题。它有三种大小:大、中(默认)和小。问题在于没有“重置”按钮,而是只有两个按钮来增加或减小字体大小。
当我将字体调整为较大尺寸时,如果我想将其减小到中等大小,则它不会回到中等大小,而是变成较小的值或向后(从较小到较大)。有没有办法解决这个问题?感谢您能给予任何帮助。
当我将字体调整为较大尺寸时,如果我想将其减小到中等大小,则它不会回到中等大小,而是变成较小的值或向后(从较小到较大)。有没有办法解决这个问题?感谢您能给予任何帮助。
这是我使用的:
<script>
$(document).ready(function() {
var size = $('#container').css('font-size');
$("#largeFont").click(function(){
$('#container').css('font-size', '30px');
return false;
});
$("#resetFont").click(function(){
$('#container').css('font-size', size);
return false;
});
$("#increaseFont").click(function() {
var size = $('#container').css('font-size');
$('#container').css('font-size', parseInt(size)+2);
return false;
});
$("#decreaseFont").click(function() {
var size = $('#container').css('font-size');
$('#container').css('font-size', parseInt(size)-2);
return false;
});
$("#smallFont").click(function(){
$('#container').css('font-size', '10px');
return false;
});
});
</script>
在 HTML 中(在这种情况下,我使用增加、减少和重置),但你可以设置为自定义字体。
<a id="largeFont">Large Font</a> -
<a id="increaseFont">Increase Font</a> -
<a id="decreaseFont">Decrease Font</a> -
<a id="smallFont">Small Font</a> -
<a id="resetFont">Reset</a>
<div id="container">
Here's some text
</div>
这是JSFiddle链接
<a id="resetFont"> 重置 </a>
,在JS中使用默认大小,或者如果需要,您可以设置自定义大小,例如:$('#container').css('font-size', '12px');
。 - Book Of Zeus(function($){
$.fontSizer = function(options) {
// Load Options
var opt = $.extend({
selector: "body",
sizeMaximum: 20,
sizeDefault: 14,
sizeMinimum: 10,
sizeInterval: 2,
buttonIncrease: ".font-sizer .increase",
buttonDecrease: ".font-sizer .decrease",
buttonReset: ".font-sizer .reset",
}, options);
// Initialize
$(opt.buttonIncrease).click(increase);
$(opt.buttonDecrease).click(decrease);
$(opt.buttonReset).click(reset);
render( $.cookie('font-size') || opt.sizeDefault );
// Increase Handler
function increase() {
size = parseFloat($(opt.selector).css("font-size"));
size = Math.min(size + opt.sizeInterval, opt.sizeMaximum);
render(size);
}
// Decrease Handler
function decrease() {
size = parseFloat($(opt.selector).css("font-size"));
size = Math.max(size - opt.sizeInterval, opt.sizeMinimum);
render(size);
}
// Reset Handler
function reset() {
render(opt.sizeDefault);
}
// Render
function render(size) {
$(opt.selector).css("font-size", size +"px");
$(opt.buttonIncrease).prop( "disabled", (size >= opt.sizeMaximum) );
$(opt.buttonDecrease).prop( "disabled", size <= opt.sizeMinimum );
$(opt.buttonReset).prop( "disabled", (size == opt.sizeDefault) );
$.cookie('font-size', size);
}
};
})(jQuery);
jQuery.fontSizer({selector:"body"});
一般来说,如果您想要三种字体大小,我建议不要使用按钮来增加和减小字体大小。相反,我建议您向用户提供字体大小的示例,让他们可以点击他们想要的那个。例如,看看Kindle在Android上是如何做的(我现在找不到一个好的公共HTML示例):http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.html
但是,如果您想要按钮,您可以这样做:
<button id="largerFont">Larger Font</button>
<button id="smallerFont">Smaller Font</button>
<p id="container">Change the font size of this.</p>
至于 JavaScript,这里有一个替代方案,它允许你设置增量的数量(在下面设置为 1,因为那是你想要的)以及增量的大小(请注意,你可能需要稍微整理一下):
$(document).ready(function() {
var size = parseInt($('#container').css('font-size').replace("px", ""), 10);
var incrementAmount = 4;
var increments = 1;
$("#largerFont").click(function(){
var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);
$('#container').css('font-size', curSize + incrementAmount);
if ((curSize + incrementAmount) >= (size + (incrementAmount * increments))) {
$("#largerFont").prop("disabled", true);
}
$("#smallerFont").prop("disabled", false);
return false;
});
$("#smallerFont").click(function(){
var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);
$('#container').css('font-size', curSize - incrementAmount);
if ((curSize - incrementAmount) <= (size - (incrementAmount * increments))) {
$("#smallerFont").prop("disabled", true);
}
$("#largerFont").prop("disabled", false);
return false;
});
});
这里有一个在线演示供您参考: http://jsfiddle.net/fordlover49/jbXmE/1/
<script >
$(document).ready(function() {
$('#plus').click(function() {
curSize = parseInt($('.post-body').css('font-size')) + 1;
$('.post').css('font-size', curSize);
});
$('#minus').click(function() {
curSize = parseInt($('.post-body').css('font-size')) - 1;
if (curSize >= 12)
$('.post').css('font-size', curSize);
});
}); <
/script>
详情请查看页面:https://www.techxplus.com/2019/09/javascript-font-resizer.html