如何在 Javascript HTML 中显示隐藏元素答案

【问题标题】：How to show hidden elements in Javascript HTML如何在 Javascript HTML 中显示隐藏元素
【发布时间】：2017-04-06 14:03:54
【问题描述】：

我已经用 hidden="true" 隐藏了我的 div，它正在工作，但是我想在单击按钮后显示它。

我使用 Node.js，这部分必须用 Javascript 编码。

html:

div class="sideDiv" hidden="true">

javascript：

我用 show() 试过了，但它不起作用。

socket.on('loginInServer',function(data){
        $('.sideDiv').show();
    });

【问题讨论】：

【解决方案1】：

使用removeAttr()方法删除属性。

ocket.on('loginInServer',function(data){
    $('.sideDiv').removeAttr('hidden');
});

或者使用attr() 方法将属性更新为false。

ocket.on('loginInServer',function(data){
    $('.sideDiv').attr('hidden', false);
});

或者使用prop() 方法将属性设置为false。

ocket.on('loginInServer',function(data){
    $('.sideDiv').prop('hidden', false);
});

仅供参考：对于隐藏元素集 CSS display:none; 这将是更好的方法，稍后您可以使用 show() 方法显示。

【讨论】：

【解决方案2】：

样式"display:none" 和属性hidden="true" 呈现不同。

隐藏的全局属性是一个布尔属性，指示该元素尚未相关或不再相关。例如，它可用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会渲染带有 hidden 属性集的元素。

jQuery的show改变了元素的style，并没有修改属性hidden

... 这大致相当于调用 .css( "display", "block" ) ...

你会想要使用jQuery的attr或prop来修改属性hidden

$('.sideDiv').attr('hidden', false);

$('.sideDiv').prop('hidden', false);

【讨论】：

【解决方案3】：

如上所述，您应该摆脱 hidden 属性并使用 css 隐藏元素。

.sideDiv {
  display: none;
}

那么jquery的show()方法就可以工作了。

【讨论】：

【解决方案4】：

除了之前的答案，你也可以用纯JS来做：

document.querySelector(".sideDiv").setAttribute("hidden", "false");

【讨论】：

【解决方案5】：

$('.sideDiv').attr('hidden', false);

但您可能希望首先隐藏它而不使用 hidden 属性，老实说我没有看到任何人使用它（除了隐藏的表单字段）。

最简单的方法是在你的 css 中有这个：

.sideDiv{display: none;}

或者如果你很懒，你可以将它嵌入到 html 中的元素本身：

<div class="sideDiv" style="display: none"></div>

然后，当您的页面加载时，它将被隐藏，并且您使用 .show() 所做的操作将起作用，因为该 jQuery 函数对 dom 元素的“显示”样式进行操作。

【讨论】：