HTMLElement.styleではデフォルトのCSS記述情報は取れないので別の方法でとる

ちょっとだけハマったので備忘録も兼ねて。
html要素をjsで取得し、キーボードを叩くと対象のheightが10pxずつ増えるとします。

<!--html-->
<div class="box">
</div>

<style>
//css
.box{
    height: 100px;
    width: 100px;
    background-color:blue;
}
</style>

//javascript
let box = document.getElementsByClassName("box").item(0);
let body = document.getElementsByTagName('body').item(0);

//body内でキーボードが押されるとboxの高さが増える
body.addEventListener('keydown',function(){
   let boxheight = box.style.height;//現在の高さ
   box.style.height = boxheight + 10 + 'px';
});

こうすると、反応はしますがなんと高さが10pxになってしまいます。
デフォルトでは100pxなので、 +10つまり110pxになるべきでは？ということで
console.log("現在の高さ" + boxheight);
してみると、何も出ず。高さの情報が取れてません。

調べてみると、

htmlelement.styleでは、デフォルトでcssに記述されている情報は取得できないようです。

（※なお、box.style.height = boxheight + 10 + 'px';でjsで操作した後は、）
htmlelement.style（つまりbox.style.height）でも高さ（10px）が取得できます。
jsで一度取得した後は操作できるようですね。

対応方法

この場合、要素の高さは、
・対象.offsetHeight
・getComputedStyle(対象).style
などでとるとうまくいきます。