this.style.display = 无； Google Chrome 中的问题 - HTML5答案

【问题标题】：this.style.display = none; issue in Google Chrome - HTML5this.style.display = 无； Google Chrome 中的问题 - HTML5
【发布时间】：2014-06-19 13:10:03
【问题描述】：

当我使用这条线时：

<div id="page1" onmouseover="this.style.color = 'grey'" onmouseout="this.style.color = 'black'" onclick="keks.style.display = 'block'" style="color: grey;">
    <p></p><h1>You want a cookie?</h1><p></p><br>
    <img id="keks" src="http://www.versuchschemie.de/upload/files2/30837447_420.jpg" style="display: none; margin: auto;" onclick="{page1.style.display = 'none'; page2.style.display = 'block'}">
</div>

然后在谷歌浏览器中点击它，没有任何反应。只是字体颜色正在改变。在学校的 Mozilla Firefox 中，它就像一个魅力。

【问题讨论】：

首先我不知道keks是什么，其次我只看到你改变了字体颜色，style.display=block如果之前显示被阻塞，会没有反应。
元素 ID 不会成为全局变量。你需要使用document.getElementById('keks')
Barmar：他们这样做了jsfiddle.net/yjs6U
@user359374 - 下一次，请重新格式化代码，这样就不需要水平滚动，因为它没有帮助。 @Barmar - 不幸的是，它们确实成为全局变量，但不鼓励这种做法并且不应使用。此外，内联事件侦听器是另一种不好的做法，应在外部脚本中替换为 addEventListener（和 attachEvent，如果您支持 Internet Explorer 8 和更早版本）。此外，<img> 的 onclick 属性中的花括号是语法错误。

标签： javascript html google-chrome styles

【解决方案1】：

onclick="keks.style.display"

应该是

onclick="document.getElementById('keks').style.display"

【讨论】：

由于您建议不要使用全局变量，因此您得到了我的支持。出于好奇：keks 的东西不应该起作用吗？我发现有趣的是，在单击处理程序中，另一个元素“page1”实际上存在，但 keks 不存在。（它位于单击的元素下方，但我认为在单击时这无关紧要）示例：jsfiddle.net/kK5Y5 单击标题：page1 在那里，keks 未定义。为什么？
@Robin 尝试切换div 和img 的ID，然后'keks' 将被定义，但'page1' 将未定义，我不确定为什么
@Robin 我在这里复制了它jsfiddle.net/GF6ME/1，它适用于div 和p 标签，但不适用于img，有更多经验的人应该回答这个问题，因为我不知道为什么