creare/modificare stili

[giuseppe500]

Ciao.
Sto creando un applicazione che permetta di modificare lo stile di un div(backcolor,forecolor ecc....).
Pensavo di gestirla con un div che appare/scompare con 3 combo e un text, un combo per scegliere la proprietà , uno per l'unita' di misura se c'è uno per le caratteristiche opzionali e un testo per il valore.
Ogni volta che seleziono una proprietà mi cambiano in relazione gli altri 2 combo.
Solo , non so' se è il modo migliore(voi come fareste?)e vorrei che ogni volta si aggiornasse a video con la proprietà cambiata, in modo da fare capire cio che si è fatto.
Alla fine scorro le proprietà dell' elemento (non so come si fa) e le salvo.
soprattutto,come impostare le proprietà che ci sono gia nei controlli text e combo?
Insomma, ho le idee un po confuse.
grazie.

[Mich_]

La cosa e` fattibile. Comporta un po' di lavoro manuale, per cui non so quanto convenga, ma questo dipende dal tuo scopo.

Se guardi in un reference di XHTML, trovi tutte le proprieta` dei vari oggetti, nei reference sui CSS trovi i valori che possono avere le singole proprieta`.

Poi il codice JS che ti serve e` molto semplice:
document.getElementById('ID_OGGETTO').style.PROPRI ETA = 'VALORE';
dove ID_OGGETTO e` definito dall'attributo id dell'oggetto
PROPRIETA e` la proprieta` da modificare
VALORE e` la stringa da assegnare come valore

Naturalmente hai necessita` di un database (fatto da una o piu` matrici) per passare al lato client le proprieta` e i valori attribuibili
Per una cosa piu` sofisicata hai necessita` di un vettore che ti tenga tutte le proprieta` assegnate, da inviare poi al server per gli scopi futuri.

[giuseppe500]

grazie Mich_.
Ho pensato di creare una classe php che crea tutti i controlli per poi andare a visualizzare solo quelli che mi interessano:
Creero' quindi una serie di righe di una tabella con una select con l'elemento attivo settato sulla proprietà,una select con le unita' di misura e una con gli elementi piu' un text con il valore.
poi con una funzione sull'onchange della proprietà vado a nascondere la riga attiva e a visualizzare quella corrispondente.
Questo per rendere piu' semplice la scrittura e non utilizzare le select dinamiche.
L'alra faccia della medaglia è che avro un div con una tabella enorme, ma questo è utile perchè posso scegliere la visualizzazione completa in cui si vedono tutte le proprietà a colpo d'occhio , semplicemente rendendo tutte le righe visibili.
Quindi vorrei creare una funzione js(e qui chiedo una mano) che fa il lavoro di rendere visibili/invisibili i controlli e di andare a riempire i controlli che ci sono gia'.
Puo' andare bene?
grazie Mich_

[Mich_]

Per rendere visibile/invisibile un oggetto di tipo blocco (tipo un <tr>):

document.getElementById('ID_OGGETTO').style.visbil ity = 'visible'; // 'hidden';

document.getElementById('ID_OGGETTO').style.displa y = 'block'; // 'none';

Il primo lascia il posto, il secondo lo contrae (quando si nasconde l'oggetto).

Nota che gli id devono essere univoci, quindi ti conviene dare nomi tipo:
<tr id="rigaFontStyle"> ... <select id="selFontStyle" ... onchange="dest.style.fontStyle=this.options[this.selectedIndex].text;"> <option>normal</option><option>italic</option><option>oblique</option> </select>

dove naturalmente dest identifica l'oggetto che dovra` cambiare stile.

[giuseppe500]

un ultima domanda Mich_ come faccio a leggere il valore di una proprieta dato l'id e il nome della proprietà??
si puo?
grazie.

[giuseppe500]

Originariamente inviato da Mich_
Per rendere visibile/invisibile un oggetto di tipo blocco (tipo un <tr>):

document.getElementById('ID_OGGETTO').style.visbil ity = 'visible'; // 'hidden';

document.getElementById('ID_OGGETTO').style.displa y = 'block'; // 'none';

Il primo lascia il posto, il secondo lo contrae (quando si nasconde l'oggetto).

ho il seguente pezzo di codice:

<table><tr id='0div0'><td><select name='css0div0' id='css0' >
<option value=0 onClick="nasconditutto(0); visualizzariga('0div0');">background-color</option>
<option value=1 onClick="nasconditutto(0); visualizzariga('1div0');">background-position</option>
<option value=2 onClick="nasconditutto(0); visualizzariga('2div0');">background-repeat</option>
</select>
</td></tr><tr id='1div0'><td><select name='css1div0' id='css1' >
<option value=0 onClick="nasconditutto(0); visualizzariga('0div0');">background-color</option>
<option value=1 onClick="nasconditutto(0); visualizzariga('1div0');">background-position</option>

<option value=2 onClick="nasconditutto(0); visualizzariga('2div0');">background-repeat</option>
</select>
<select name='misura1div0' id='idmisura1' >
<option value='ex'>ex</option>
<option value='em'>em</option>
<option value='px'>px</option>
<option value='cm'>cm</option>
<option value='mm'>mm</option>
<option value='pc'>pc</option>
<option value='in'>in</option>

<option value='pt'>pt</option>
</select>
<select name='opzionali1div0' id='opzionali1' >
<option value=1>length</option>
<option value=1>top</option>
<option value=1>center</option>
<option value=1>bottom</option>
<option value=1>left</option>
<option value=1>right</option>
</select>

</td></tr><tr id='2div0'><td><select name='css2div0' id='css2' >
<option value=0 onClick="nasconditutto(0); visualizzariga('0div0');">background-color</option>
<option value=1 onClick="nasconditutto(0); visualizzariga('1div0');">background-position</option>
<option value=2 onClick="nasconditutto(0); visualizzariga('2div0');">background-repeat</option>
</select>
<select name='opzionali2div0' id='opzionali2' >
<option value=2>repeat</option>
<option value=2>no-repeat</option>
<option value=2>repeat-x</option>
<option value=2>repeat-y</option>

</select>
</td></tr></table>
e utilizzo le seguenti funzioni js:
function visualizzariga(id)
{
	alert(id);
	document.getElementById(id).style.display = 'block';
}
function nasconditutto(div)
{

	for(var i=0;document.getElementById(i+'div'+div)!=undefined;i++)
	{
		document.getElementById(i+'div'+div).style.display = 'none';
	}
}

ma quando faccio nasconditutto e poi visualizzariga ad una riga(ho controllato che esiste)tutto mi si sposta in basso di una riga.
Mentre vorrei che la riga selezionata mi apparisse sempre in alto a tutto.
Ho controllato i tr e i td ma non sono riuscito a saltarci fuori.
ciao

[giuseppe500]

up

[Mich_]

Ci sono gravi errori di sintassi ne codice HTML:
<tr id='2div0'>

I nomi degli id non possono iniziare per numero. Devono iniziare con una lettera.
In JS potrebbe fare un parseInt() automatico, sballando quindi il tutto.

come faccio a leggere il valore di una proprieta dato l'id e il nome della proprietà??

la domanda si presta a diverse interpretazioni; inoltre la risposta completa dipende dal tipo di proprieta` che vuoi leggere.
In linea di massima:
var propr = document.getElementById('ID_OGGETTO').proprieta;
var propr = document.getElementById('ID_OGGETTO').style.propri eta;

Il primo per proprieta` specifiche dell'oggetto; il secondo per le propreta` definite dal CSS.

NOTA: non tutte le proprieta` sono leggibili: ci sono proprieta` che sono solo scrivibili.

[giuseppe500]

grazie mich_.
Ho cambiato mettendo una lettera davanti all' id ,solo che continua a sballare.
Tu la funzione js come la faresti per mantenere solo la select selezionata in alto?
Il codice è uguale a quello gia postato solo inserendo una p davanti all' id.

[Mich_]

Ci sono problemi nella chiamata degli eventi: non li puoi applicare alle opzioni, ma devi applicarli alla select.

Esempio:

<select name='css2div0' id='css2' onchange="visualizzariga ('p'+this.options[this.selectedIndex].value+'div0');">
<option value="0">background-color</option>
<option value="1">background-position</option>
<option value="2">background-repeat</option>
</select>

La funzione nasconditutto() puoi chiamarla all'interno di visualizzariga() (all'inizio), per semplificare il codice della select.

Altra nota:
all'interno delle funzioni usi due variabili che hanno nomi usati dal DOM: sarebbe da evitare (c'e` qualche browser che si arrabbia).