Méthode : HTMLElement.getBoundingClientRect()

<style type="text/css">
div#myDiv {
background-color:#faa;
padding:5px;
margin:5px;
border:3px solid #999
}
div.calque {
position:absolute;
opacity:0.6;
padding:0px;
margin:0px;
background-color:#fff;
text-align:center;
animation:anim 0.3s infinite;
}
@keyframes anim {
0% { opacity: 0; }
100% { opacity: 0.6; }
}
</style>

<div id="myDiv">MON DIV</div>

<script>
function showCalque() {
var div=document.getElementById("myDiv");
var pos=div.getBoundingClientRect();
console.log(pos);

/* Création d'un calque transparent au dessus de myDiv */
var calque=document.createElement("div");
calque.innerHTML=Math.round(pos.width)+"x"+Math.round(pos.height);
calque.setAttribute("class", "calque");
calque.style.top=Math.round(pos.top)+"px";
calque.style.left=Math.round(pos.left)+"px";
calque.style.width=Math.round(pos.width)+"px";
calque.style.height=Math.round(pos.height)+"px";
document.body.appendChild(calque);
}

document.addEventListener("DOMContentLoaded", showCalque);
</script>

Emulation de la console

Une fois le DOM chargé, un calque est superposé juste au dessus de myDiv.
Une animation clignotante le rend bien visible.

Dunod Fnac Amazon

Chargement
en cours...