<h1>ResizeObserver</h1>
<div id="resize">
</div>
#resize{
width:100px;
height:100px;
background-color:red;
cursor:pointer;
}
#resize:hover{
width:150px;
height:150px;
background-color:blue;
}
var ro = new ResizeObserver(function(mutationRecords){
mutationRecords[0].target.textContent = mutationRecords[0].contentRect.width;
});
ro.observe( document.getElementById("resize"));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.