elem.style.height 没有在 while 循环内触发

Question

我想制作一个 "collapses" 完成后的进度条。
所谓崩溃，我的意思是重复降低高度 1。

但是当进度条"is done"（达到宽度100）时，就什么都没有了。

这是我的代码：

               function frame() {
                    var elem = document.getElementById("myBar");
                    var height = 30;
                    if (width >= 100) {
                        while (elem.style.height != 0) {
                            elem.style.height = height + '%';
                            height--;
                        }
                        clearInterval(id);
                    } else {
                        width++; 
                        elem.style.width = width + '%';
                    }
                }

哪里出错了？

抱歉，如果我的问题很愚蠢或重复；我搜索了论坛但没有找到重复的 post.

提前致谢

Answer 1

正如你所做的那样

 elem.style.height = height + '%';

以下永远不会是假的：

while (elem.style.height != 0)

因为这是错误的：

"0%"==0 // false

而且我认为循环有问题。如果要逐个降低高度，最好调用一个setInterval，因为循环会在不到1ms的时间内将高度变为0，这与直接将高度设置为0没有区别。

elem.style.height 没有在 while 循环内触发

elem.style.height not triggered inside while loop

javascript

html

css

progress-bar

progress