修改

Question

如何强制javascript执行以下操作？如果标识为myBar的元素的宽度为100％，请将ID为result的元素的样式更改为“block”（将其设置为none）？请回答！

代码：html

<div id="myProgress">
  <div id="myBar"></div>
</div>
<button onclick="move()">Run Malware Code Scan</button>
        <p id="result">
<em>Fount 142 threats!</em> Take responsibility please!
        </p>

代码：CSS

#myProgress {
    width: 100%;
    background-color: #ebf442;
}
#myBar {
    width: 1%;
    height: 30px;
    background-color: #ed4949;
}

#result {display:none;}
ul li {list-style-type:square;}

代码：JS

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = 1;
    var id = setInterval(frame, 3);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}
</script>
<script>
if (document.getElementById("myBar").style.width= "100%")
document.getElementById("result").style.display ="block"
</script>

P.S。：我是JS的初学者！

Answer 1

修改

当您检查宽度是否为block时，您可以将frame功能中的显示更改为>= 100。这不会解决你的问题吗？

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = 1;
    var id = setInterval(frame, 3);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
            document.getElementById("result").style.display = "block";
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}
</script>

Answer 2

样式属性的问题

element.style.property返回任何值，直到从标签应用css，<div style="..."></div>。

所以你的代码无效。您应该应用标记中的宽度css来使代码正常工作。

<div id="myProgress">
  <div id="myBar" style="width: 100%;"></div>
</div>
<button onclick="move()">Run Malware Code Scan</button>
<p id="result">
  <em>Fount 142 threats!</em> Take responsibility please!
</p>

正如Oen44所知，if条件中也存在语法错误（==写为=）。

Javascript - 如果元素的宽度为100％，请执行某些操作

2 个答案:

修改