增加/减少/重置字体大小不起作用

时间:2013-03-18 17:19:22

标签: jquery css

我正在尝试在我的网络服务器上设置增加/减少/重置字体大小选项,但它似乎不起作用。我想要调整所有元素的大小(即标题,按钮,模态窗口等)

这是我的代码到目前为止,我在这里包含了一个jsfiddle:http://jsfiddle.net/R3NGU/3/

 var originalFontSize = $('.page').css('font-size');

 // reset font size

 $(".resetFont").click(function () {
     $('html').css('font-size', originalFontSize);
 });

 // increase font Size

 $(".increaseFont").click(function () {
     var currentFontSize = $('html').css('font-size');
     var currentFontSizeNum = parseFloat(currentFontSize, 10);
     var newFontSize = currentFontSizeNum * 1.2;
     $('html').css('font-size', newFontSize);
     return false;
 });

 // decrease font size

 $(".decreaseFont").click(function () {
     var currentFontSize = $('html').css('font-size');
     var currentFontSizeNum = parseFloat(currentFontSize, 10);
     var newFontSize = currentFontSizeNum * 0.8;
     $('html').css('font-size', newFontSize);
     return false;
 });

2 个答案:

答案 0 :(得分:1)

而不是:

$('html').css('font-size', newFontSize);

使用wildcard all selector

$('*').css('font-size', newFontSize);

<强> jsFiddle example

答案 1 :(得分:0)

我用它来减少每个元素的所有字体大小

jQuery('body').each(function(index) {
    jQuery(this).find('*').each(function() {

    var cur_size =  jQuery(this).css('font-size');
   //alert(cur_size);
    cur_size = cur_size.replace("px",""); 
   jQuery(this).css('font-size', (cur_size - 2));
    });
});