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')" /;>
</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 ()" 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.