Question

<script language="javascript">
function toggle(id) {
    alert('call');
    if (document.getElementById(id).style.display == "none") {
        alert('now visible');
        document.getElementById(id).style.display = "";
    } else {
        alert('now invisible');
        document.getElementById(id).style.display = "none";
    }
}
</script>

</head>
<body onload="toggle('image1');alert('test_body');toggle('image2')">

<script language="javascript">
alert('test_pre_function');
toggle('image1');
alert('test_after_function');
toggle('image2');
</script>

看起来很多代码，但它很简单，所以我想大多数人都不会遇到麻烦。 toggle（）应该切换包含图像的div的显示状态。

当用户进入网站时，div应该隐藏，当一切都被加载时，div应该显示出来。（有载）

奇怪的是，身体中的功能（不在身体标签中）只能工作一半，我得到并提醒'test_pre_function'并且我得到一个警告'呼叫'（在功能之外），但就是这样。 body标签中的代码运行得很好。

我发现这很奇怪，因为它应该完成相同的两次，一次运行，另一次没有，所以我想我一定是犯了一些愚蠢的错误。

Answer 1

脚本在解析后立即执行。如果在执行脚本时尚未解析image1和image2，则document.getElementById("image1")将返回null，因此.style.display将抛出“is null或not object error”。这解释了为什么这两个警报有效 - 执行在第一个document.getElementById(id).style.display == "none"行停止。

将脚本移动到文档中的图像元素之后，它应该可以正常工作。

<script>
    alert(document.getElementById("image1")); // -> null
</script>
<img id="image1" src="some/image.jpg" />
<script>
    alert(document.getElementById("image1")); // -> object
</script>

Answer 2

你错过了吗？

alert('now visible');
document.getElementById(id).style.display = "block";

Answer 3

试试这个http://jsfiddle.net/hUDb4/

var toggle = (function() {
    // an object to keep state for elements
    var state = {};
    return function(id){
        document.getElementById(id).style.display = (state[id] = !state[id]) ? "none" : "block";
    };
})();


toggle("myid"); // none
toggle("myid"); // block

但是这里的主要问题是其他人已经声明在文档完全加载之前DOM还没有准备好。

Answer 4

你在身体onload中使用了警报。基本上一旦警报将被执行，它就会要求您点击OK。同时最后一个功能可能会延迟对焦。

见下文

<script>
    alert(document.getElementById("image1"));
    <img id="image1" src="some/image.jpg" />
    alert(document.getElementById("image1"));
</script>

函数调用[javascript]

4 个答案: