Why fontSize does not apply a size when a direct CSS declaration does?

Question

The code below is supposed to reduce the size of the middle fragment when it extends outside of the container box:

let middleSize = document.getElementById("middle").clientHeight;
let topSize = document.getElementById("top").clientHeight;
let bottomSize = document.getElementById("bottom").clientHeight;
if (middleSize > 200 - (topSize + bottomSize)) {
  document.getElementById("middle").fontSize = "50%"
}

#container {
  width: 300px;
  height: 200px;
  display: grid;
  border-width: 10px;
}

div {
  border-width: 1px;
  border-style: solid;
}

#top {
  border-color: red;
  border-style: dotted;
}

#middle {
  border-color: blue;
  border-style: solid;
  border-width: 5px;
}

#bottom {
  border-color: green;
  border-style: dashed;
}

<div id="container">
  <div id="top">
    hello
  </div>
  <div id="middle">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div id="bottom">
    hello
  </div>
</div>

When adding font-size: 50%; to the declarations in #middle, the size is applied.

Why doesn't the JS version work?

Note: this is not actually a duplicate at all (the questions have nothing to do with each other) but the answers solved my problem, so be it. Not the first, not the last time this happens - at some point fighting some yahoo downvoters and duplicate-but-not-quite lovers is tiring. (rant over)

Answer 1

You need to apply fontSize to the style property of the element.

document.getElementById("middle").style.fontSize = "50%"

Answer 2

It is document.getElementById("middle").style.fontSize = "50%"