Nella lezione precedente abbiamo visto come creare un elemento in modo dinamico e come ottenere un riferimento ad un elemento esistente. Una volta che abbiamo ottenuto un oggetto Element, possiamo impostare, alterare e ottenere dinamicamente i suoi stili. Il primo compito può essere effettuato tramite i metodi setStyle, setStyles e con il metodo ad argomento dinamico set con parametro settato a 'styles'. Vediamo come fare:
// settiamo il colore al valore 'blue'
myEl.setStyle('color', 'blue');
// settiamo più stili in una sola volta
myEl.setStyles({'padding': '20px 0px', 'margin': '0px 20px'});
// settiamo gli stili tramite il metodo Element::set
myEl.set('styles', {'padding': '20px 0px', 'margin': '0px 20px'});
Con il metodo set (e il corrispondente metodo get) è possibile effettuare un numero elevato di operazioni che va ben oltre l'impostazione degli stili. Grazie ad essi è possibile impostare ed ottenere i valori degli stili e delle proprietà di un elemento.
Ottenere gli stili di un elemento
Ora che sappiamo come impostare gli stili per un elemento, vediamo come ottenere i valori delle differenti proprietà CSS di un elemento tramite i metodi getStyle e getStyles:
// ottieni il valore della proprietà 'color'
var color = myEl.getStyle('color');
// otteniamo il valore intero della proprietà 'width'
var width = myEl.getStyle('width').toInt();
// ottieni i valori di svariate proprietà
var styles = myEl.getStyles('color', 'padding', 'width');
// alert '200px - blue'
alert(styles.width + ' - ' + styles.color);
Impostare ed ottenere i valori delle proprietà di un elemento
In una modalità simile a quella appena vista per gli stili è possibile impostare i valori delle proprietà di un elemento ed ottenerli rispettivamente tramite i metodi setProperty e getProperty (e le alternative setProperties e getProperties):
// impostiamo la proprietà 'href' di un'ancora ad un nuovo valore
myAnchor.setProperty('href', 'http://www.newvalue.it/');
// otteniamo il valore della proprietà 'href'
var href = myAnchor.getProperty('href');
Lavorare con le dimensioni di un elemento
Grazie all'Hash Element.Dimensions possiamo ottenere i valori delle dimensioni e degli offsets di un elemento, sia relativi alla viewport sia ad un altro elemento. Vediamo come ottenere le posizioni e le dimensioni reali del nostro elemento 'myDiv':
// ottieni il valore della proprietà offsetWidth myDiv.getSize().x; // ottieni il valore della proprietà scrollHeight myDiv.getScrollSize().y; // ottieni il valore della proprietà scrollTop myDiv.getScroll().y; // ottieni le reali coordinate dell'elemento var coord = myDiv.getCoordinates(); // valori delle posizioni dell'elemento alert(coord.top + ' - ' + coord.left);
Conclusione
In questa lezione dedicata alla classe Element abbiamo visto come è possibile impostare e ricavare i valori di stili, proprietà, dimensioni e posizioni degli elementi. Nella successiva lezione, sempre dedicata alla classe Element, vedremo come utlizzare alcuni dei metodi da essa offerti e l'importanza dell'Element.Storage.