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’)" /;>
</form>
Vediamo qualche altro esempio. Consideriamo di avere un’area di testo alla quale settiamo e rimuoviamo alcuni attributi.
function set(){ area = document.getElementsByTagName("textarea").item(0) }
<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.
Se vuoi aggiornamenti su Gestire gli attributi inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Semplificare la realizzazione delle API
Adottare OpenAPI 2.0 rapidamente abbattendo i tempi di produzione di documentazione, mock e sdk da fornire in modo immediato al […]