Dom e Javascript

**azer** · 31-03-2006, 20:32

Premesso che del modello dom non ne sò molto e riesco ad applicare ancor meno... c'è qualcuno che riesce a dipanare la nebbia in cui stò brancolando?

Vorrei riuscire a centrare un oggetto, di dimensioni non note a priori, nella finestra.

Per ottenere le dimensioni, totali, della finestra sono riuscito, dopo notevoli sforzi ad ottenere un risultato con:

codice:

document.write(document.body.clientWidth+" "+document.body.clientHeight);

quindi sarebbe sufficiente assegnare i due valori a due variabili e ci siamo.
Quando tento di avere le dimensioni di un oggetto (

, <div> o <img>) non ottengo nulla:

codice:

var spanObj = document.getElementById('ciao');
var width = spanObj.style.width;
var height = spanObj.runtimeStyle.height;
document.write(width+" "+height);

Nella finestra del browser non compare assolutamente nulla, niente, zero assoluto!

Sia in Firefox che in explorer!
Come posso fare?? Help!!

Altra cosa: ho letto da molte parti che è meglio usare sempre e comunque il costrutto document.getElementById('') al posto di document.all e document.layer... confermate o smentite?

**fcaldera** · 31-03-2006, 20:48

1) per ottenere altezza/larghezza si usa
<elemento>.offsetHeight
<elemento>.offsetWidth

dove <elemento> è un riferimento ad un elemento della pagina

2) Il w3c incoraggia l'utilizzo getElementById.
Inoltre document.all funziona solo su Explorer e Opera mentre document.layers solo su Netscape.

**azer** · 01-04-2006, 00:40

Graaazieee!!!

Ci ho passato notti insonni a bestemmiarci sopra in aramaico antico!

Mitico!

Se funziona con tutti i tag (o almeno con quelli utili

) sono a posto!

Adesso comincio a provarlo ma ho già visto che con Opera funge.

Ancora grazie!

Devo proprio trovare qualche manuale o qualche corso on-line per imparare bene il dom!

**fcaldera** · 01-04-2006, 00:52

basta il DOM inspector che si trova nel menu strumenti di Firefox

**azer** · 01-04-2006, 02:16

Non vorrei abusare della tua pazienza e bontà... nè sembrare più idiota di quel che sono (al momento non mi sento molto furbo)...

ma...

per impostare la posizione del mio <span> in modo che sia al centro della pagina ho usato document.getElementById(id)..style.left e funziona (avendo cura di impostare come stile una position absolute).

Ho trovato nel dom ispector la proprietà offsetWidth impostata a 0 (ma io la leggo e non mi sembra che sia 0) ed un altra proprietà chiamata offsetLeft (impostata a 0 come offsetTop). L'ho provata ma non và...

Dov'è il trucco?

Comunque, per ora, lo script è il seguente, a beneficio di coloro che stanno cercando una soluzione allo stesso problema:

codice:

<style>
.box
{
	position: absolute;	
}
</style>
<body>
<span class="box" id="entra">
Ciao
</span>
<script type="text/javascript" language="JavaScript1.5">
function CentraBox(id)
{
	var Box = document.getElementById(id);
	var Dx = Box.offsetWidth;	
	var Dy = Box.offsetHeight;
	var ScreenX = document.body.clientWidth;
	var ScreenY = document.body.clientHeight;
	var X = (ScreenX/2) - (Dx/2);
	var Y = (ScreenY/2) - (Dy/2);
	Box.style.left = (ScreenX/2)-(Dx/2);	
	Box.style.top = (ScreenY/2)-(Dy/2);	
}
CentraBox("entra");
</script>

... si lo so, lo script non dovrebbe stare li ma ce l'ho ficcato per avere tutto quanto vicino. Poi finirà in un js separato.

Discussione: Dom e Javascript

Strumenti discussione

Ricerca discussione

Visualizza

Dom e Javascript

Permessi di invio