Změňte velikost textu po kliknutí pomocí JavaScriptu

Tento příspěvek napsal Eric Wendelin. Chcete-li se o Ericovi dozvědět více, klikněte sem.

Mnoho blogů a webů, které mají široké spektrum uživatelů, mívají tlačítka nebo obrázky, které mění velikost textu pro snadnější čitelnost. To lze snadno implementovat s trochou JavaScriptu a nějakým HTML, ke kterému se to připojí. Existují knihovny, které to dělají, ale v mnoha případech je to pravděpodobně přehnané. Jednoduchost je obecně lepší, pokud je to možné.

Funkce JavaScriptu pro změnu velikosti textu

function resizeText(multiplier) {
  if (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}

Všimněte si, že řádek 2 výše uvedeného kódu vyžaduje, abyste u prvku zadali velikost písma (je v pořádku mít velikost písma zadaná v pixelech). Dobře, podívejme se na naše možnosti použití funkce resizeText().

HTML (používám zde obrázky, ale můžete použít jakýkoli HTML prvek)

<img id="plustext" alt="Increase text size" src="images/makeTextBigger.jpg" onclick="resizeText(1)" />
<img id="minustext" alt="Decrease text size" src="images/makeTextSmaller.jpg" onclick="resizeText(-1)" />

Události můžete samozřejmě nenápadně přidávat takto:

Nenápadný způsob používání JavaScriptu

$("plustext").addEvent("click", function() {resizeText(1);});
$("minustext").addEvent("click", function() {resizeText(-1);});

Zde je jednoduchý příklad toho všeho dohromady. Funguje to bezchybně alespoň na IE, Firefoxu, Opeře a Safari (ostatní nejsou plně otestovány, prosím dejte zpětnou vazbu :)

Jsem si jistý, že vás čtenáři napadají nějaká vylepšení, takže se na ně podívejme v komentářích!

O Ericu Wendelinovi

Eric Wendelin je softwarový inženýr společnosti Sun Microsystems. Když zrovna nedělá supertajné programování pro Sun, hraje sálový fotbal, hraje s přáteli Wii a fandí Colorado Avalanche. Píše také blog o JavaScriptu, CSS, Javě a produktivitě na eriwen.com