Question

所以我对javascript很新，我正在尝试使用简单的if ... else语句在显示和隐藏div元素之间切换。我的HTML页面如下所示：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
#fluffy {
            height:200px;
            width:200px;
            background-color:yellow;
            display:block;
}
#pepper {
            height:200px;
            width:200px;
            background-color:green;
            display:block;
}
</style>
</head>

<body>
<div id="fluffy"></div>
<div id="pepper" onclick="changeState()"></div>
<script type="text/javascript">
function changeState() {
var divState = document.getElementById('fluffy').style.display;
if (document.getElementById('fluffy').style.display == 'block') {
    document.getElementById('fluffy').style.display = 'none';
}
else if (document.getElementById('fluffy').style.display == 'none') {
    document.getElementById('fluffy').style.display = 'block';
} else {
    alert('test error message');
}
}
</script>
</body>

</html>

当我在浏览器中加载页面时，会收到一个包含“测试错误消息”的警告框。我的原始代码有document.getElementById（'fluffy'）。style.display存储在一个名为divState的变量中，但是这甚至没有给我一个警告框，它没有做任何事情。我感觉我正在使用==错误或其他什么，但我真的不确定。我已经使用了===，当这不起作用时，我切换到==，这是在上面的代码中。

如果有人知道我到底做错了什么，我会很感激帮助。

谢谢，哈罗德

Answer 1

好吧，看起来你们解决了我的问题。我不能够感谢你，我一定会关注jQuery！

Answer 2

首次加载页面时，div没有任何内联样式。 element.style仅读取内联样式。

您需要使用style="display:block;"呈现div，或者如果您不想/不想这样做，请查看支持的浏览器的getComputedStyle选项

Answer 3

尝试将onclick更改为此

<div id="pepper" onclick="changeState"></div>

Answer 4

document.getElementById('fluffy').style.display是''。由于您使用样式表设置样式，因此您必须使用getComputedStyle（以及朋友之间的跨浏览器兼容性）。您可以在Get all computed style of an element的答案中找到示例跨浏览器实现。

Answer 5

使用计算样式：

<div id="fluffy"></div>
<div id="pepper" onclick="changeState()"></div>
<script type="text/javascript">
function changeState() {
    var fluffy = document.getElementById('fluffy');
    var divState = window.getComputedStyle(fluffy).display;

    if (divState == 'block') {
       fluffy.style.display = 'none';
    }
    else if (divState == 'none') {
       fluffy.style.display = 'block';
    } else {
       alert('test error message');
    }
}
</script>

jsFiddle

Answer 6

我知道，你正在尝试学习我想要鼓励的JavaScript，但是对于jQuery，这整个内容将是一个单行加上交叉浏览器友好等。

<div id="fluffy"></div>
<div id="pepper"></div>

<script>只包含：

$("#pepper").click(function () { $("#fluffy").toggle(); });

JSFiddle

Try it out 。

我的JavaScript if ... else语句无法正常工作

6 个答案: