I'm trying to resize the height of an element by using Element.getBoundingClientRect(). The height of the element was logged before and after element_box.height += 50; where the computed height does change. Yet, the height of the element doesn't change on the page. Why does div height remain 120px when it's suppose to be 170px?

https://jsfiddle.net/sxm2gn48/1/

<div></div>

div {
  border: 1px solid;
  height: 120px;
  width: 130px;
}

let div = document.querySelector("div");

window.addEventListener("load", function(event) {
    const element_box = div.getBoundingClientRect();
    element_box.height += 50;
})