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

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

html:

CSS:

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

编辑替换了选择器中的主体，因为我没有注意到您希望屏幕的任何部分被单击

使用jQuery解决方案（我建议您使用显示属性。因为，如果使用可见性，元素将保留其空间，即使它是隐藏的。使用display:none；元素被“删除”）：

HTML

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

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

jQuery

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

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

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

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

    });
});

演示：

---

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

HTML

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

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

演示：

我建议：

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

修改以上内容，使用

visibility

（而不是

display

）：

参考资料：

---

此处需要单击事件，而不是鼠标事件。你有JSFIDLE设置吗？

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

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

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

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

    });
});

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

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