JavaScript  »  Guide  »  Guida MooTools 

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.

Altri articoli

Altre guide

Altre newsletter