Javascript 在点击时显示元素答案

【问题标题】：Javascript show element on clickJavascript 在点击时显示元素
【发布时间】：2010-12-05 03:56:15
【问题描述】：

我正在尝试在没有 Jquery 的情况下执行此操作。我想在单击触发器时显示一个 div。到目前为止，我有这个来隐藏元素。

 document.getElementById('element').style.display = 'none';

HTML..

<div class="element">Ahem, boo!!</div>
<a href="#" id="showDiv">Show</a>

如何创建一个函数来在单击链接时显示 div？我想避免在链接本身中使用onclick="showDiv() 之类的函数。

【问题讨论】：

为什么要避免使用onclick事件？您唯一的其他选择是，但这并没有更好...
如果链接隐藏了，怎么点击？
@MikeRuhlin 您的评论非常不正确。绝对有另一种选择（实际上不止一种）可以将 JavaScript 与 HTML 标记混合。您应该避开 HTML 中的 onclick 属性以及 HTML 中的所有其他 JavaScript 事件处理程序。
@CyberJunkie 如果您以编程方式生成 HTML 锚并将它们注入到 DOM 中，这是可以接受的。如果您的 HTML 从服务器发送到带有这种语义不正确的锚点的浏览器，那是不行的。然而，jQuery 在这里是无关紧要的。很多人在他们的 HTML 中不正确地使用 jQuery、Prototype 和其他 JavaScript 库这一事实并不能说明它是正确的。
@CyberJunkie 在语法上并非不受支持。 JavaScript 很好地支持它（就像它也将点击处理程序应用于其他元素一样）。这只是手头任务的错误 HTML 标记，就像使用 blockquote 视觉缩进不是引号的内容是不正确的一样。

标签： javascript html json

【解决方案1】：

document.getElementById('showDiv').onclick=function(){
  // Remove any element-specific value, falling back to stylesheets
  document.getElementById('element').style.display='';
};

【讨论】：

【解决方案2】：

可以在 JavaScript 中完全附加事件处理程序。示例：

document.getElementById('showDiv').onclick = function() {
    // Do whatever now that the user has clicked the link.
};

要反转您发布的第一行代码的效果，您可以使用：

document.getElementById('element').style.display = 'block'; // or
document.getElementById('element').style.display = '';

【讨论】：

【解决方案3】：

将此添加到脚本中：

function myFunction() {

            var btn = document.getElementById("myButton");
            //to make it fancier
            if (btn.value == "Click To Open") {
                btn.value = "Click To Close";
                btn.innerHTML = "Click To Close";
            }
            else {
                btn.value = "Click To Open";
                btn.innerHTML = "Click To Open";
            }
            //this is what you're looking for
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

并编辑按钮和 div：

<button onclick="myFunction()" id="myButton" value="Click To Open Instructions">Click To Open Instructions</button>

 <div style="display:none;" id="myDIV">
</div>

【讨论】：