如何检测进度条元素是否达到100%宽度？现有代码失效求助

用户尝试检测进度条元素是否达到100%宽度，但编写的JavaScript代码未生效，相关代码如下：

用户的JavaScript代码 #

let i = 0;
function start() {
    if (i == 0){
        i = 1;
        let elem = document.getElementById("myBar");
        let width = 10;
        let id =  setInterval(frame, 60);

        function frame() {
            if (elem.getAttribute("width") >= '100 %') {
                document.getElementsByTagName('form')[0].submit();
                clearInterval(id);
                i = 0;
            }
            else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }
}

用户的HTML代码片段 #

<div id ="myProgress">
   <div id="myBar"></div>
</div>

问题分析 #

代码未生效的核心原因有两个：

• 错误使用elem.getAttribute("width")获取宽度：进度条的宽度是通过style.width设置的行内样式，并非DOM元素的width属性，因此这个方法无法获取到正确的宽度值。
• 字符串比较逻辑错误：判断条件中使用带空格的字符串'100 %'，但代码中设置的宽度格式是width + '%'（无空格），且直接比较字符串的逻辑不符合数值判断的需求。

修复方案 #

方案一：直接跟踪宽度变量（高效简洁） #

因为进度条的宽度是通过width变量逐步递增的，直接判断该变量是否达到100即可：

let i = 0;
function start() {
    if (i == 0){
        i = 1;
        let elem = document.getElementById("myBar");
        let width = 10;
        let id = setInterval(frame, 60);

        function frame() {
            if (width >= 100) {
                document.getElementsByTagName('form')[0].submit();
                clearInterval(id);
                i = 0;
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }
}

方案二：通过计算样式判断（通用场景） #

如果进度条宽度由其他逻辑控制，无法直接跟踪变量，可以通过获取元素的计算样式来判断：

let i = 0;
function start() {
    if (i == 0){
        i = 1;
        let elem = document.getElementById("myBar");
        let width = 10;
        let id = setInterval(frame, 60);
        const parentWidth = elem.parentElement.offsetWidth;

        function frame() {
            // 获取元素实际渲染的宽度
            const computedWidth = parseInt(window.getComputedStyle(elem).width);
            // 计算宽度占父容器的百分比
            const percentage = (computedWidth / parentWidth) * 100;

            if (percentage >= 100) {
                document.getElementsByTagName('form')[0].submit();
                clearInterval(id);
                i = 0;
            } else {
                width++;
                elem.style.width = width + '%';
            }
        }
    }
}

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