javascript - OnClick 函数仅在第二次单击时起作用

Question

我有以下代码创建了一些函数:hidePara1()，它在段落的 CSS hidden 属性之间切换；和 displayFrame()，它对 Iframe 的 display 属性执行相同的操作。使用 CSS 将段落和 Iframe 分别设置为 display:none 和 visibility:hidden。

var Par1 = document.getElementById("para1");
var Frame1 = document.getElementById("iframe1");        

function hidePara1() {
  Par1.style.display = ((Par1.style.display!='none') ? 'none' : 'block')
}

function displayFrame() {
  Frame1.style.visibility = ((Frame1.style.visibility!='hidden') ? 'hidden' : 'visible');
}

以及元素所在的 HTML，我还通过 onClick 属性在其中调用函数。

<a href="#" onClick="displayFrame();">Display iFrame</a>        
<div class="frame-container"><iframe id="iframe1" src="somelink" width="800" height="460"></iframe></div>

<img id="img1" onClick="hidePara1();" src="someimage.jpg">
<div id="para1">
<p>This is the text for paragraph 1.</p>
</div>

问题很奇怪:两个 onclick 事件都完美工作，从第二次单击开始。换句话说，第一次单击时两者都不起作用。从我遇到的大量其他类似问题来看，这似乎是一个相当常见的问题，但我无法弄清楚，其中一个问题可以帮助我。请注意，它还需要是普通 JS - 框架不行。

对此问题的解决方案将非常感激。

谢谢

Answer 1

在处理程序中，您可以访问Par1.style。元素的 style 属性是指内联 style="..." HTML 属性中的样式属性。您在其他地方指定了 CSS 中的类似以下内容:

#para1 {
    display: none;
}

这不会在 Par1.style.display 中被拾取。查看getComputedStyle如果您想查看当前应用的内容。 fiddle

或者只是以相反的方式执行你的条件:

Par1.style.display = ((Par1.style.display!='block') ? 'block' : 'none')