innerHTML mantenere formattazione

**Igreo** · 10-11-2011, 16:35

Non riesco a far visualizzare la pagina attraverso la scritta con innerHTML.
Nel particolare lo sfondo della tabella principale non si visualizza o richiede tutto il suo spazio e poi, soltanto oltre, inserisce il contenuto, oppure visualizza lo sfondo soltanto nel primo td... ho provato diverse soluzioni!

Vi posto un codice d'esempio:

codice:

document.getElementById("cart").innerHTML="<TABLE width='360' style='height:380; background: url(sfondo_f.gif) no-repeat;'><TR><TD>";
  document.getElementById("cart").innerHTML+="<DIV style='height: 25; width: 360; display: none; cursor: pointer;'></DIV>";
  document.getElementById("cart").innerHTML+="<DIV id='15' style='display: inline;'><TABLE cellpadding='2' cellspacing='0'><TR><TD>[img]45.jpg[/img]</TD><TD>[img]44.jpg[/img]</TD></TR></TABLE></DIV>";
  document.getElementById("cart").innerHTML+="<DIV id='14' style='display: inline;'><TABLE cellpadding='2' cellspacing='0'><TR><TD>[img]42.jpg[/img]</TD><TD>[img]41.jpg[/img]</TD></TD></TR></TABLE></DIV>";
  document.getElementById("cart").innerHTML+="<DIV style='height: 25; width: 360; display: block; cursor: pointer;'></DIV>";
  document.getElementById("cart").innerHTML+="</TD></TR></TABLE>";

Ho provato diverse soluzioni e questa è la peggiore.. cmq il problema rimane!

**lucavizzi** · 10-11-2011, 17:44

Negli stili in linea mancano le unità di misura.

style='height:380;

style='height: 25; width: 360;

devi specificare che sono pixel, px.

**Igreo** · 10-11-2011, 18:34

Originariamente inviato da lucavizzi
Negli stili in linea mancano le unità di misura.

style='height:380;

style='height: 25; width: 360;

devi specificare che sono pixel, px.

Non credo sia questo il problema! ...

**lucavizzi** · 10-11-2011, 19:10

Originariamente inviato da Igreo
Non credo sia questo il problema! ...

Io invece credo di sì, gli stili in linea che hai scritto vengono ignorati.

**br1** · 10-11-2011, 19:19

Il codice che hai postato inserito direttamente nella pagina e non a posteriori tramite innerHTML funziona?

**Igreo** · 10-11-2011, 19:20

ti dico di no.. vengono perfettamente visti! Il problema è che la scrittura con innerHTML+= da qualche problema.. e non capisco cosa fare per risolvere!
Nel caso che ho postato.. prima si vede il table tutto intero alto 380 e poi a seguito i div (quindi oltre i 380)!!

**lucavizzi** · 10-11-2011, 19:27

Non è possibile che una regola CSS senza unità di misura venga "perfettamente vista".

**Igreo** · 11-11-2011, 16:00

dopo diverse prove:

1) Lo script funziona al di fuori dell'innerHTML.
2) La mancanza della sigla px a seguito di width e height non pregiudica la normale visualizzazione (ma magari alcuni browser faranno difficoltà..!)
3) Ho provato a mettere tutto lo script in un solo inerHTML, quindi senza innerHTML+=, e lo script visualizza correttamente la pagina! IL PROBLEMA è PERCHè? Non ricordo qualche regola che diceva che i table aperti vanno chiusi nello stesso innerHTML e non in un += ...tra l'altro chiamato nel frengente subito a seguire! Ho visto script che addirittura in questo modo aprivano <HTML> e lo chiudevano in un +="</HTML>"; ...

Il problema può essere che io applico questa scritta da un pulsante per modificare parte della pagina.. magari se lo utilizzavo direttamente in lettura dal caricamento.. probabilmente funzionava, o no?!!?!?

**Igreo** · 28-11-2011, 12:52

UP

La questione è la medesima: Come posso fare per non inserire tutto in un solo innerHTML, per facilitare la lettura del codice?

**carlomarx** · 28-11-2011, 13:12

innerHTML non è una semplice proprietà, è un setter, il che vuol dire che quando tu gli assegni un valore il browser ci fa qualcosa (un po' come accade con document.cookie). In particolare, in questo caso il browser proverà a completare i tag che non si chiudono. Ecco perché non puoi assegnare un innerHTML a pezzi! Prova così, vedrai che funzionarà:

codice:

var tuaVariabile = "<TABLE width='360' style='height:380; background: url(sfondo_f.gif) no-repeat;'><TR><TD>";
tuaVariabile += "<DIV style='height: 25; width: 360; display: none; cursor: pointer;'></DIV>";
tuaVariabile += "<DIV id='15' style='display: inline;'><TABLE cellpadding='2' cellspacing='0'><TR><TD>[img]45.jpg[/img]</TD><TD>[img]44.jpg[/img]</TD></TR></TABLE></DIV>";
tuaVariabile += "<DIV id='14' style='display: inline;'><TABLE cellpadding='2' cellspacing='0'><TR><TD>[img]42.jpg[/img]</TD><TD>[img]41.jpg[/img]</TD></TD></TR></TABLE></DIV>";
tuaVariabile += "<DIV style='height: 25; width: 360; display: block; cursor: pointer;'></DIV>";
tuaVariabile += "</TD></TR></TABLE>";

document.getElementById("cart").innerHTML = tuaVariabile;

Discussione: innerHTML mantenere formattazione

Strumenti discussione

Ricerca discussione

Visualizza

innerHTML mantenere formattazione

la questione è la seguente

Permessi di invio