Hoe de lettergrootte te wijzigen onClick in WordPress met JavaScript

Heb je ooit een site of blog tegengekomen waarmee hun bezoekers de lettergrootte kunnen wijzigen met een of andere knop in de zijbalk? Normaal gesproken zou u deze functie nooit moeten toevoegen, omdat alle belangrijke browsers de in- en uitzoomknoppen hebben, maar er zijn nog steeds een groot aantal gebruikers die niet bekend zijn met die zoomfunctie. In dit artikel laten we u zien hoe u uw gebruikers de mogelijkheid geeft de lettergrootte in WordPress te wijzigen met een eenvoudige JavaScript-functie en wat HTML.

Voeg eerst dit script toe aan uw kop- of voettekst:

functie resizeText (multiplier) if (document.body.style.fontSize == "") document.body.style.fontSize = "1.0em";  document.body.style.fontSize = parseFloat (document.body.style.fontSize) + (vermenigvuldiger * 0.2) + "em"; 

Voeg deze code vervolgens gewoon ergens in uw thema toe (de meeste mensen plaatsen het in de zijbalk)

 Maak tekst groter | Maak tekst kleiner 

U kunt ook afbeeldingen gebruiken zoals +/- pictogrammen of andere als u dat wilt. Om dit allemaal mogelijk te maken, moet u de lettergrootte voor uw html-element opgeven.

Als alternatief, als je het gebied wilt beperken waar de lettergrootte zou worden opgenomen (bijvoorbeeld: alleen je inhoudsgebied), verander dan het originele javascript om zoiets als dit te zijn:

 var c = document.getElementById ("inhoud"); functie resizeText (vermenigvuldiger) if (c.style.fontSize == "") c.style.fontSize = "1.0em";  c.style.fontSize = parseFloat (c.style.fontSize) + (vermenigvuldiger * 0.2) + "em";  

Dit betekent dat u alleen de lettergrootte wijzigt in het element met de id = "inhoud".

Op zoek naar een levend voorbeeld? Bekijk de blog van Eric Wendelin.

Bron: David Walsh