javascript - elem.style.height 未在 while 循环内触发

Question

我想制作一个完成后“折叠”的进度条。
通过折叠，我的意思是重复将高度降低 1。

但是当进度条“完成”(达到宽度 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 + '%';
                    }
                }

哪里出错了？

抱歉，如果我的问题很愚蠢或重复；我搜索了论坛，但没有发现重复的帖子。

提前致谢

Answer 1

正如你所做的那样

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

以下永远不会是假的:

while (elem.style.height != 0) 

因为这是错误的:

"0%"==0 // false

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