Ridimensionare il testo da pulsanti – Funzioni HTML&JS

Come configurare dei tasti per aumentare e ridurre la dimensione del testo (font-size) in una pagina HTML.

In questo articolo della serie “Funzioni HTML&JS” imparerai a configurare una funzione Javascript per impostare manualmente la dimensione del testo contenuto in un una pagina web o in tutto il sito.

Inoltre ti mostrerò come integrare lo script in modo che abbia effetto sulla dimensione del testo dell’intero documento o in una specifica area della pagina.

Pulsanti per aumentare e diminuire la dimensione del testo

Descrizione

Lo script in questione, che ti descriverò qui di seguito, ha la funzione di ridurre o aumentare la dimensione del font/testo all’interno di una pagina web o di una sezione, pensato per essere implementato su di un pulsante HTML (button) o ad un collegamento ipertestuale (tag a).

Avrai sicuramente già visto questa feature in numerosi siti web, dove in genere i pulsanti interessati sono indicati dai simboli “–” e “+” o affiancati dalle lettere “Aa”.

Al click su di uno de pulsanti, la dimensione del testo contenuto nella pagina si ingrandirà o si ridurrà, così da migliorare la visibilità e agevolare la lettura del contenuto.

Noi di BytePost abbiamo utilizzato questa funzione in Codewith.it. per aumentare o diminuire la dimensione dei caratteri all’interno dell’area di testo HTML.

Questo strumento può essere utile in molteplici casi e volendo può essere usato per altri tipi di oggetti presenti nel sito, e non solo contenuti testuali.

Codice

Qui di seguito proporremo il codice di questo strumento in linguaggio Javascript integrato all’HTML.

Per seguire la procedura non è necessaria una conoscenza approfondita di HTML o Javascript, ma un minimo di pratica è consigliata, il tanto che basta per configurare gli ID e gli eventi Javascript.

Se vuoi maggiori informazioni sugli ID Leggi qui.

Lo script qui in baso è già configurato e pronto per essere copiato ed incollato nella tua pagina. L’unica cosa che dovrai impostare manualmente sarà l’ID dell’area di testo interessata oppure configurarlo per l’intero documento HTML (e tutto il testo contenuto).

N.B. Non ci dedicheremo alla personalizzazione dello stile e CSS dei pulsanti, del testo o di qualunque altro oggetto presente nella pagina HTML. Per questo ti consiglio di seguire la nostra guida sul CSS e i fogli di stile.

Ricorda di non preoccuparti se non comprendi il significato dei codici, leggili attentamente e prosegui con il testo.

Javascript

Il primo step sarà integrare gli script JS nel documento, in modo che il browser esegua le loro istruzioni al momento del click sui pulsanti dedicati e cambi la dimensione del testo.

Per configurare i tasti HTML per la riduzione o l’incremento della dimensione del font/testo con javascript, dovrai inserire i seguenti codici dei tag <script></script> (nel caso di un file .html) o integrarli in un documento .js esterno dedicato (in questo caso ti basterà rimuovere il tag <script>).

<script>
function aumentaFont() {
abc = document.getElementById('myarea');
currentSize = parseFloat(abc.style.fontSize);
abc.style.fontSize = (currentSize + .1) + "em";
}
function riduciFont() {
abc = document.getElementById('myarea');
currentSize = parseFloat(abc.style.fontSize);
abc.style.fontSize = (currentSize - .1) + "em";
}
</script>

La posizione all’interno della pagina è indifferente, ma ti consiglio di metterli nel footer del documento per velocizzare il caricamento e dare priorità a risorse più importanti.

Per avere effetti sull’intera pagina e non solo su un singolo div, sostituisci “document.getElementById(‘myarea’)” con “document.body“.

HTML

Ora è il momento di scrivere i più semplici codici HTML e creare i button su cui andremo a cliccare. Predisponi una sezione o div a questi pulsanti per il ridimensionamento del testo nella tua pagina e incolla il seguente testo:.

<button onclick="riduciFont('myarea')" title="Clicca per ridurre la dimensione del testo">Testo(-)</button>
<button onclick="aumentaFont('myarea')" title="Clicca per aumentarela dimensione del testo">Testo(+)</button>
<br><div id="myarea" style="width:400px; height:100px; font-size:1em;">Questa è un area di testo creata da BytePost</div>

I primi due tag sono i pulsanti predisposti su cui vengono eseguiti gli script, il terzo tag è un semplice div con un testo interno di dimensioni base 1 em.

N.B. per funzionare correttamente è necessario stabilite le dimensioni di base del font tramite CSS, come nell’esempio precedente.

Non serve altro! Salva il documento in formato .html ed eseguilo con il tuo browser.

Ora il risultato sarà questo (prova pure):

Se vuoi esercitarti con l’HTML, CSS e JS: usa il nostro editor online gratuito, usa i numerosi strumenti e scrivi codici senza distrazioni.

Hai avuto problemi con la procedura o hai bisogno di altre informazioni? Scrivici nei commenti in basso!

Inoltre ricordati di iscriverti alla nostra Newsletter e seguirci su Facebook.

Leggi anche: Come bloccare l’uso del tasto destro del mouse

Articoli Recenti:

• Recensione Storm Front di Jim Butcher
• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche