Question

我是JavaScript的初学者，看起来我不太了解if语句。当div变为500px时，我想将div的背景颜色从红色变为蓝色。当我点击身体标签上的任何地方时，你将获得500px。这是代码：

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body onclick="Go();" >
<div id="test"></div>

<style>
#test {
width: 300px;
height: 250px;
background-color: red;
}
</style>
<script>
function Go() {
var div_test = document.getElementById('test').style;
div_test.width="500px";
}

if (document.getElementById('test').style.width="500px") {document.getElementById('test').style.cssText="background-color:blue";}

</script>
</body>

</html>

看起来那个浏览器而不是将if语句的括号中的部分理解为条件“当发生这种情况”时，他只是创建了div的状态/样式。当页面加载div已经是蓝色时。

Answer 1

在你的陈述中

if(document.getElementById('test').style.width="500px")

应该是

if(document.getElementById('test').style.width == "500px")

在javascript中，您必须使用==或===作为比较值的运算符

此外，如果你想在元素宽度变为500px时有蓝色背景，你将有两个选项

1-添加间隔

function Go() {
    var div_test = document.getElementById('test').style;
    div_test.width="500px";
}

var interval = setInterval(function() {
    if (document.getElementById('test').style.width="500px") { 
        document.getElementById('test').style.cssText="background-color:blue";
        clearInterval(interval);
    }
}, 500);

2 - 只需将您的陈述移至Go()函数（您将不再需要if语句）

function Go() {
    var div_test = document.getElementById('test').style;
    div_test.width="500px";
    document.getElementById('test').style.cssText= " background-color:blue";
}

Answer 2

在if语句中更好地解决样式属性问题。检查此链接上的解决方案：

https://stackoverflow.com/a/31879611/2657104

样式更改时，使用Javascript更改div的宽度

2 个答案: