Devo adesso
giustiziare definitivamente i dubbi che mi porto appresso sulla differenza fra
offsetWidth,
style.width e
getComputedStyle.
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...
