什麼是最好的方法（使用jQuery）來實現增加和減少頁面字體大小的按鈕？

我想要有兩個按鈕，一個是減小按鈕，另一個是增加按鈕，分別減少和增加整個頁面的字體大小。什麼是最好的方法（使用jQuery）來實現增加和減少頁面字體大小的按鈕？

說，一些p標記設置爲16像素的字體，h1標籤設置爲30像素，li標籤14px的等

我如何，使用jQuery，代碼的點擊功能，以增加他們的字體大小。我也有興趣讓他們只能做到這一點，例如在任何一個方向上說5次，以避免荒謬的字體大小。

我有這樣的事情作爲是：

$('button.decrease').click(function() { 
     var fontSize = $('p').css('font-size'); 

     if (fontSize == "14px") { 
      $('p').css({ 
       'font-size': '12px' 
      }); 
     } 
     else if (fontSize == "16px") { 
      $('p').css({ 
       'font-size': '14px' 
      }); 
     } 
     else if (fontSize == "18px") { 
      $('p').css({ 
       'font-size': '16px' 
      }); 
     } 
     else if (fontSize == "20px") { 
      $('p').css({ 
       'font-size': '18px' 
      }); 
     } 
     else if (fontSize == "22px") { 
      $('p').css({ 
       'font-size': '20px' 
      }); 
     } 
    }); 

    $('button.increase').click(function() { 
     var fontSize = $('p').css('font-size'); 

     if (fontSize == "12px") { 
      $('p').css({ 
       'font-size': '14px' 
      }); 
     } 
     else if (fontSize == "14px") { 
      $('p').css({ 
       'font-size': '16px' 
      }); 
     } 
     else if (fontSize == "16px") { 
      $('p').css({ 
       'font-size': '18px' 
      }); 
     } 
     else if (fontSize == "18px") { 
      $('p').css({ 
       'font-size': '20px' 
      }); 
     } 
     else if (fontSize == "20px") { 
      $('p').css({ 
       'font-size': '22px' 
      }); 
     } 
    });

但它僅適用於增加p標籤的大小，我希望它在整個頁面是全局。

來源

2012-11-13 Doug Smith

鑑於該功能已經內置在桌面瀏覽器中，您爲什麼要這麼做？ – Pointy

如果你只是在css中使用'em'單位並且在身體標記上用你的按鈕切換乘法因子，那麼就簡單多了 – charlietfl

如果你的頁面元素/ css使用相對字體大小（'em'或'％'），增加或減少只需要修改一個元素 - 根。 –

您可以將函數傳遞給css方法。

$('#decrease').click(function() { 
    $('p, h1, li').css('font-size', function(i, v) { 
     return +v.match(/\d+/).join() - 2 
    }) 
}) 

$('#increase').click(function() { 
    $('p, h1, li').css('font-size', function(i, v) { 
     return +v.match(/\d+/).join() + 2 
    }) 
})

http://jsfiddle.net/s3TJr/

您可以使用通用選擇*選擇所有的元素，但是這矯枉過正。

來源

2012-11-13 00:28:37 undefined

呃這是一個不錯的解決方案^^ –

函數（i，v）{}做什麼？ –

它定義了一個函數xD –

這是一個簡單的例子：

$(document).ready(function() { 

    $('#inc').click(function() { 

     $('*').each(function() { 
      $(this).css('font-size', parseInt($(this).css('font-size').replace(/px$/,'')) + 2 + "px"); 
     }); 
    }) ; 

    $('#dec').click(function() { 

     $('*').each(function() { 
      $(this).css('font-size', parseInt($(this).css('font-size').replace(/px$/,'')) - 2 + "px"); 
     }); 
    }) ; 
});

工作示例這裏：http://jsfiddle.net/YT8K4/1/

來源

2012-11-13 00:36:34

你可以使用em比做你的字體大小隻是改變你的父元素的字體大小如身體，像

<div class="small"> 
<div style="font-size: 1em;"> 
    Text 1 
</div> 

<div style="font-size: 1.5em;"> 
    Text 1.5 
</div> 

<div style="font-size: 0.5em;"> 
    Text 0.5 
</div> 
</div>

和你的CSS：

.small {font-size: 0.85em;} 
.big {font-size: 1.25em;}

一旦更改爲父元素的CSS類，它會改變你的子元素的文字大小，像這樣：jsFiddle

來源

2012-11-13 00:57:09 Felix

怎麼樣CSS & JS的組合？默認情況下，在標籤上加載類爲「100」的頁面。 JS然後可以是：

<html data-zoom=100> 

---- 

[data-zoom="80"] h1, 
[data-zoom="80"] p { 
    font-size: 80%; 
} 

[data-zoom="120"] h1, 
[data-zoom="120"] p { 
    font-size: 120%; 
} 

---- 

<a href="#" class="-">-</a> 
<a href="#" class="+">+</a> 

---- 

var upDown = function() { 
    var zoom = 100, zoomBy = 20; 
    return function (e) { 
     zoom = e.currentTarget.className === '-'? zoom - zoomBy : zoom + zoomBy; 
     document.documentElement.dataset.zoom = zoom; 
    } 
}(); 

$('.-, .\\+').on('click', upDown);

查看例如http://jsbin.com/ehoyep/2/。

來源

2012-11-13 01:29:30 Stephen

什麼是最好的方法（使用jQuery）來實現增加和減少頁面字體大小的按鈕？

回答

相關問題