Per fare questo, mi pongo due elementi, di cui il secondo ha un left in corrispondenza del termine del primo.
Saranno di colore differente.
Per calcolare la posizione del secondo sommo l'ampiezza del primo come style.width alla posizione del margine sinistro del primo (style.left). Ciò è possibile in quanto questo attributo di stile è stato definito all'interno del Javascript, in quanto il Javascript non legge i fogli di stile.
<html>
<head>
<style>
.celeste{
position:absolute;
top:100px;
height:100px;
background:cyan;
}
.rosso{
position:absolute;
top:120px;
width:400px;
height:100px;
background:red;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
function posiziona(){
$("primo").style.left="0px";
$("primo").style.width="400px";
$("secondo").style.left=$("primo").offsetLeft+$("primo").style.width;
}
window.onload=posiziona;
</script>
</head>
<body>
<div id='primo' class='celeste'></div>
<div id='secondo' class='rosso'></div>
</body>
</html>
Ecco il posizionamento relativo dei due elementi:
Ora aggiungo un enorme bordo al primo elemento:
...
.celeste{
position:absolute;
top:100px;
height:100px;
background:cyan;
border:50px solid blue;
}
...
ed ecco cosa accade:
Ora uso offsetWidth:
Senza bordo:
<html>
<head>
<style>
.celeste{
position:absolute;
top:100px;
height:100px;
background:cyan;
}
.rosso{
position:absolute;
top:120px;
width:400px;
height:100px;
background:red;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
function posiziona(){
$("primo").style.left="0px";
$("primo").style.width="400px";
$("secondo").style.left=$("primo").offsetLeft+$("primo").offsetWidth;
}
window.onload=posiziona;
</script>
</head>
<body>
<div id='primo' class='celeste'></div>
<div id='secondo' class='rosso'></div>
</body>
</html>
E il risultato è uguale a prima:
Adesso rimetto l'enorme bordo:
...
.celeste{
position:absolute;
top:100px;
height:100px;
background:cyan;
border:50px solid blue;
}
Ed ecco:
Conclusione:
style.width misura soltanto la larghezza dell'elemento senza tenere conto del bordo.
offsetWidth, invece misura anche le dimensioni del bordo.
Infatti, nella seconda immagine, si vede bene come il secondo elemento sia posizionato a una distanza dal margine destro del primo elemento pari a due volte la larghezza del bordo.
Per quanto riguarda getComputedStyle, dovrebbe dare la stessa misura di style.left, in quanto restituirebbe i valori degli attributi di stile, tornando utile per ottenerli qualora questi non siano specificati tramite Javascript ma in un foglio di stile.
Devo fare poi ancora qualche considerazione su offsetLeft e style.left...
Nessun commento:
Posta un commento