JavaScript:单击时如何更改元素的可见性?

标签 javascript jquery html css

我正在尝试制作一个代码,允许我点击屏幕的任何部分,当我点击屏幕时应该显示消息“点击!” 到目前为止,我得到了下一个代码

html:

<html>
    <head>
         <title>Sense events anywhere</title>
         <script type="text/javascript" src="anywhere.js"></script>
         <link type="text/css" rel="stylesheet" href="anywhere.css" />
    </head>
    <body id="body" onload="init();">
      <div id="message"> Click! </div>
  </body></html>

JavaScript:

var e;
function init(){
   e = document.getElementById("message");
   document.getElementById("message").style.visibility = "hidden";
   e.onmousedown = displayIt(e);
   e.onmouseup = hideIt;
}     
function displayIt(e) {
   e.style.visibility = "visible";
}
function hideIt() {
   e.style.visibility = "hidden";   
}

CSS:

body {  
}
div#message{
}

到目前为止,我只尝试在单击时将消息变为可见和“不可见”,但它不起作用 对不起我的英语,我不是母语人士。如果有人可以帮助我,那就太好了。 谢谢。

最佳答案

var visible = true,
body = document.getElementById("body"),
mess = document.getElementById("message");

body.onclick = function() {
     if (visible === true) {
        mess.style.visibility = "hidden";
        visible = false;
} else {
        mess.style.visibility = "visible";
        visible = true;
       }
}

编辑 替换了选择器中的正文,因为我没有注意到您想要点击屏幕的任何部分

关于JavaScript:单击时如何更改元素的可见性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22751528/

相关文章:

javascript - 如果在特定页面上运行脚本 - rails

jquery - 在每个循环中使用 jQuery 属性从选择器开始

javascript - 添加另一个 "Formats"选择到 WordPress 中的 TinyMce 4

javascript - jquery滑动切换: hidden + new link

javascript - 如何将 JavaScript 应用于 Bootstrap btn-group-justified 以选择/取消选择子按钮元素

javascript - 如何获取 javascript 文件内容并解析它以使用它的变量

javascript - jQuery SerialScroll 循环参数

javascript - 检索 getJSON 回调函数中设置的变量

javascript - 需要帮助处理 Django 中的日期格式

html - Internet Explorer 中的 Twitter Bootstrap 崩溃问题