Gestire gli attributi

Nella pagina è stato utilizzato un javascript che contiene le funzioni per estendere alcune proprietà e alcuni metodi W3C anche ad Explorer 4.x e Opera 5.x. Il codice javascript è stato ampiamente commentato nelle lezioni precedenti.

In queste pagine esamineremo alcuni esempi volti a mostrare il funzionamento dei metodi che manipolano gli attributi degli elementi. I metodi in questione sono: setAttribute, getAttribute e removeAttribute.

Cerchiamo di spiegare il funzionamento di questi tre metodi applicandoli a questo paragrafo (tag <p>) che recuperiamo grazie al suo attributo ID (pari a “testo”).

Dapprima settiamo l’attributo ALIGN al valore RIGHT:

<form action=””>

<input type=”button” value=”Allinea a destra” onclick=”document.getElementById(‘testo’).setAttribute(‘align’,’right’)” />

</form>

recuperiamo poi il valore dell’attributo:

<form action=””>

<input type=”button” value=”Recupera l’attributo ‘align'” onclick=”alert(document.getElementById(‘testo’).getAttribute(‘align’))” />

</form>

ed infine, eliminiamolo:

<form action=””>

<input type=”button” value=”Rimuovi l’attributo ‘align'” onclick=”document.getElementById(‘testo’).removeAttribute(‘align’)&quot /;>

</form>

Vediamo qualche altro esempio. Consideriamo di avere un’area di testo alla quale settiamo e rimuoviamo alcuni attributi.

<form>
<textarea rows=”4″ cols=”40″></textarea><br/>
<input type=”button” margin=”0px” value=”Inseriamo del testo” onclick=”document.getElementsByTagName(‘textarea’).item(0).setAttribute(‘value’,’inseriamo del testo’)” />

<input type=”button” value=”Disabilita il testo” onclick=”document.getElementsByTagName(‘textarea’).item(0).setAttribute(‘disabled’,’true’)” />

<input type=”button” value=”Riduci le colonne a 20″ onclick=”document.getElementsByTagName(‘textarea’).item(0).setAttribute(‘cols’,’20’)” />
</form>

Passiamo ora a manipolare alcuni attributi della sottostante immagine. Utilizzeremo l’item numero 44 perché l’immagine che vedete sotto è la numero 45 dell’intera pagina (il primo item è equivalente a 0):

<img id=”immagine” src=”img/dom_logo.gif” alt=”immagine con id=”immagine”” />

<form action=””>
<input type=”button” value=”Bordo dell’immagine” onclick=”document.getElementById(‘immagine’).setAttribute(‘border’,’1′)” /> <br/>
<input type=”button” value=”Rimuovi il bordo” onclick=”document.getElementById(‘immagine’).removeAttribute(‘border’)” /> <br/>

<input type=”button” value=”Allarga l’immagine (width=”300″)” onclick=”document.getElementById(‘immagine’).setAttribute(‘width’,’300′)”> <br/>
<input type=”button” value=”Rimuovi la larghezza” onclick=”document.getElementById(‘immagine’).removeAttribute(‘width’)”> <br/>

<input type=”button” value=”Taglia l’immagine (height=50)” onclick=”document.getElementById(‘immagine’).setAttribute(‘height’,’50’)”> <br/>
<input type=”button” value=”Rimuovi l’altezza” onclick=”document.getElementById(‘immagine’).removeAttribute(‘height’)”> <br/>

<input type=”button” value=”Verifica l’attributo del bordo” onclick=”alert(document.getElementById(‘immagine’).getAttribute(‘border’))”> <br/>
<input type=”button” value=”Verifica l’attributo della larghezza” onclick=”alert(document.getElementById(‘immagine’).getAttribute(‘width’))”> <br/>
<input type=”button” value=”Verifica l’attributo dell’altezza” onclick=”alert(document.getElementById(‘immagine’).getAttribute(‘height’))”> <br/>

</form>

Questi primi semplici esempi danno un’idea di come funzionano questi metodi, e della la capacità che offrono di modificare dinamicamente caratteristiche strutturali del documento. Pagine e script DHTML faranno progressivamente sempre un più largo uso di questi mezzi, soprattutto con la diffusione delle ultime release dei browser.