ちょっとだけハマったので備忘録も兼ねて。
html要素をjsで取得し、キーボードを叩くと対象のheightが10pxずつ増えるとします。
<!--html--><divclass="box"></div><style>//css.box{height:100px;width:100px;background-color:blue;}</style>//javascriptletbox=document.getElementsByClassName("box").item(0);letbody=document.getElementsByTagName('body').item(0);//body内でキーボードが押されるとboxの高さが増えるbody.addEventListener('keydown',function(){letboxheight=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
などでとるとうまくいきます。