Slik endrer du skriftstørrelse onClick i WordPress med JavaScript

Har du noen gang kommet over et nettsted eller en blogg som lar sine besøkende endre skriftstørrelsen fra noen +/- -knapper i sidefeltet? Normalt bør du aldri legge til denne funksjonen fordi alle de store nettleserne har zoom inn / ut-zoom-knappene, men det er fortsatt et stort antall brukere som ikke er kjent med zoomfunksjonen. Vel i denne artikkelen vil vi vise deg hvordan du skal gi brukerne muligheten til å endre skriftstørrelsen i WordPress ved hjelp av en enkel JavaScript-funksjon og noen HTML.

Først kan vi legge til dette skriptet i overskriften eller bunnteksten:

funksjon resizeText (multiplikator) if (document.body.style.fontSize == "") document.body.style.fontSize = "1.0em";  document.body.style.fontSize = parseFloat (document.body.style.fontSize) + (multiplikator * 0.2) + "em"; 

Deretter legger du ganske enkelt til denne koden hvor som helst i temaet ditt (de fleste legger det i sidefeltet)

 Gjør tekst større | Gjør tekst mindre 

Du kan også bruke bilder som +/- ikoner eller andre hvis du vil. For alt dette er mulig, må du spesifisere skriftstørrelsen for HTML-elementet.

Alternativt, hvis du vil begrense området der fontstørrelsen skulle inkluderes (for eksempel: bare innholdsområdet ditt), endrer du det opprinnelige javascript for å være noe slikt:

 var c = document.getElementById ("innhold"); funksjon resizeText (multiplikator) if (c.style.fontSize == "") c.style.fontSize = "1.0em";  c.style.fontSize = parseFloat (c.style.fontSize) + (multiplikator * 0.2) + "em";  

Dette betyr at du bare skifter skriftstørrelsen i elementet som har id = "innhold".

Leter du etter et levende eksempel? Sjekk ut Eric Wendelin sin blogg.

Kilde: David Walsh