使用JavaScript获取按钮高度失败，寻求问题排查帮助

问题代码中的错误分析 #

第一种获取方式的错误 #

你写的这段代码存在两处错误：

const btn = document.querySelector(".displayBtn");
const btnStyle = getComputedStyle (btn);
const btnHeight = btnStyle.style.offsetHeight;

1. getComputedStyle返回的是元素计算后的样式对象，本身没有.style属性，无需额外调用
2. offsetHeight是DOM元素自身的属性，不属于CSS样式，直接从元素实例读取即可

第二种获取方式的错误 #

这段代码的问题在于类名的写法：

const btn = document.getElementsByClassName(".displayBtn");
const btnHeight = btn[0].offsetHeight;

getElementsByClassName的参数是纯类名，不需要加前缀.，正确的类名参数应为"displayBtn"

修正后的可行写法 #

以下几种方式都可以正确获取按钮高度：

写法1：直接读取元素的offsetHeight #

const btn = document.querySelector(".displayBtn");
const btnHeight = btn.offsetHeight; // 返回数值，不带单位（比如48）

写法2：通过getComputedStyle获取带单位的高度值 #

const btn = document.querySelector(".displayBtn");
const btnStyle = getComputedStyle(btn);
const btnHeight = btnStyle.height; // 返回带单位的字符串，比如"48px"

写法3：修正getElementsByClassName的调用 #

const btns = document.getElementsByClassName("displayBtn");
const btnHeight = btns[0].offsetHeight;

补充说明 #

你的按钮是动态创建后追加到DOM的，代码中已经先执行了figcap.appendChild(tempDiv)，所以元素已经存在于DOM中，获取高度的时机是正确的，修正上述写法后即可正常获取按钮高度，无需再用300px的临时值。

内容的提问来源于stack exchange，提问作者Hobbyist