javascript - 如何动态增加谷歌的 polyfill 对话框高度

Question

我使用 Google 的 polyfill 对话框，并希望根据用户是否单击对话框按钮在其中添加更多元素(行)来动态增加它的高度。 这是当用户单击该按钮时调用的 javascript 的一部分:

var mc_dialog = document.getElementById('mc_dialog');
var h = mc_dialog.style.height;
console.log("mc_dialog height = ",h);

但是 height 是简单的空，没有值(value)——什么都没有

虽然 mc_dialog.style.height = "500px" 工作完美。

为什么我得不到 mc_dialog.style.height 的值？

编辑:

在 Evil Penguin 的回答之后，我在 javascript 函数中设置高度 initially，这会打开对话框，如下所示:

mc_dialog.style.height = "500px"

稍后当用户点击向对话框添加内容时，我现在可以检索高度，所以现在看起来像这样:

var mc_dialog = document.getElementById('mc_dialog');
var h = parseInt(mc_dialog.style.height);
mc_dialog.style.height= h+50+"px";

而且效果很好。

但现在我有一个问题，为什么我必须首先设置 style.height ？它不是该元素的永久属性吗？如果不是，为什么？

Answer 1

Here是类似的问题。

.style.height 只有在您首先设置该属性时才有效。

编辑:

Here是 HTMLElement.style 属性的引用。它说:

style 属性一般对于了解元素的样式没有用，因为它仅表示在元素的内联样式属性中设置的 CSS 声明。

据我了解，如果元素的内联声明中没有 style="smth"，则 HTMLElement.style.smth 不起作用。