<!DOCTYPE HTML>
<body>
<div id="outer" style="width:200px; height:200px; background:blue; transform:translateY(10px)">
<div id="inner" style="width:200px; height:100px; background:yellow; transform:translateX(100px)">
</div>
</div>
<script>
console.log(outer.getBoundingClientRect());
outer.style.width = "400px";
console.log(outer.getBoundingClientRect());
outer.style.transform = "translateY(100px)";
</script>