0

所以我对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 的变量中，但这甚至没有给我一个警告框，它什么也没做。我觉得我在使用 == 错误之类的东西，但我真的不确定。我使用了 ===，当它不起作用时，我切换到 ==，它在上面的代码中。

如果有人知道我到底做错了什么，我将不胜感激。

谢谢，哈罗德

4

6 回答 6

1

好吧，看来你们解决了我的问题。非常感谢你，我一定会研究 jQuery！

于 2013-08-01T00:18:23.990 回答
0

我知道，您正在尝试学习我也想鼓励的 JavaScript，但是使用jQuery，这整个东西将是单行加上跨浏览器友好等。

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

<script>仅包含：

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

在 JSFiddle 上尝试一下。

于 2013-07-31T14:35:24.983 回答
0

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

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

于 2013-07-31T14:28:49.660 回答
0

尝试将其更改onclick为

<div id="pepper" onclick="changeState"></div>
于 2013-07-31T14:28:57.953 回答
0

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

于 2013-07-31T14:29:06.517 回答
0

使用计算样式：

<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

于 2013-07-31T14:33:35.110 回答