Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Lavorare con gli stili, le proprietà e le dimensioni di un elemento

Modificare facilmente le proprietà visuali di un oggetto
Modificare facilmente le proprietà visuali di un oggetto
Link copiato negli appunti

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.


Ti consigliamo anche