JavaScript：单击后如何更改元素的可见性？

Question

我正在尝试编写一个代码，使我可以单击屏幕的任何部分，并且当我单击屏幕时，应该显示消息“单击！”。 到目前为止，我得到了下一个代码

的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{
}

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

Answer 1

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;
       }
}

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

Answer 2

jQuery的解决方案（我建议您使用display属性。因为，如果您使用可见性，则即使元素被隐藏，元素也将保留其空间。display：none;元素被“移除”。）：

的HTML

<div id="message"> Click! </div>

的CSS

#message {
   display: none;
}

jQuery的

$(document).ready(function(){
    $(window).click(function(){
        $('#message').toggle();
    });
});

演示： http : //jsfiddle.net/j3KVT/2/

如果您想使用能见度属性，那么这是jQuery的（众多）解决方案之一：

的HTML

<div id="message">Click!</div>

jQuery的

$(document).ready(function () {
    $('#message').css('visibility', 'hidden');
    $(window).click(function () {

        if ($('#message').css('visibility') == 'hidden') 
        $('#message').css('visibility', 'visible');

        else $('#message').css('visibility', 'hidden');

    });
});

演示： http : //jsfiddle.net/j3KVT/3/

Answer 3

我建议：

function toggleMessage(targetID){
    var target = document.getElementById(targetID),
        display = target.style.display;
    target.style.display = display && display == 'block' ? 'none' : 'block';
}

document.body.addEventListener('click', function(){
    toggleMessage('message');
});

简单的JS Fiddle演示。

修改了以上内容以使用visibility （而不是display ）：

function toggleMessage(targetID){
    var target = document.getElementById(targetID),
        visibility = target.style.visibility;
    target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}

document.body.addEventListener('click', function(){
    toggleMessage('message');
});

简单的JS Fiddle演示。

参考文献：

EventTarget.addEventListener() 。

JavaScript：单击后如何更改元素的可见性？

问题描述

3 个解决方案

解决方案1
0 已采纳 2014-03-31 00:05:05

解决方案2
0 2014-03-31 00:12:00

解决方案3
0 2014-03-31 00:14:58

JavaScript：单击后如何更改元素的可见性？

问题描述

3 个解决方案

解决方案1 0 已采纳 2014-03-31 00:05:05

解决方案2 0 2014-03-31 00:12:00

解决方案3 0 2014-03-31 00:14:58

解决方案1
0 已采纳 2014-03-31 00:05:05

解决方案2
0 2014-03-31 00:12:00

解决方案3
0 2014-03-31 00:14:58