JavaScript：如何在單擊時更改元素的可見性？

我試圖做一個代碼，允許我點擊屏幕的任何部分，當我點擊屏幕時，應該顯示消息「點擊！」到目前爲止，我得到了下面的代碼JavaScript：如何在單擊時更改元素的可見性？

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

到目前爲止，我只試圖把消息可見光和點擊「隱身」，但不起作用對不起，我的英文，我不是一位母語人士。如果有人能夠幫助我，那將會很棒。謝謝。

來源

2014-03-30 Steven Suárez

您將需要單擊事件而不是mouseevents。你有沒有設置jsfiddle？ – pj013

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

編輯在選擇替換的身體，我沒有注意到你想要的屏幕的任何部分點擊

來源

2014-03-31 00:05:05

解決方案使用jQuery（我建議你使用的顯示屬性。因爲，如果你使用的可視性，元素將保持它的空間，即使是隱藏的顯示：無;元素被「刪除」）：

HTML

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

CSS

#message { 
    display: none; 
}

jQuery的

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

DEMO：http://jsfiddle.net/j3KVT/2/

如果你想使用visibility屬性，那麼這是（許多之一）與解決方案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'); 

    }); 
});

DEMO：http://jsfiddle.net/j3KVT/3/

來源

2014-03-31 00:12:00

我建議：

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

Simple JS Fiddle demo。

修正上述使用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'); 
});

Simple JS Fiddle demo。

參考文獻：

EventTarget.addEventListener()。

來源

2014-03-31 00:14:58

JavaScript：如何在單擊時更改元素的可見性？

回答

相關問題