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

我已隐藏我的div与隐藏=“真正”这是工作,但我想显示它后点击一个button。

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

HTML:

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

JavaScript的:

我用show()试过了,但是不起作用。

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

如上所述,您应该摆脱隐藏的属性,并使用CSS来隐藏元素。

 .sideDiv { display: none; } 

然后jquery的show()方法将工作。

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

但是,你可能想隐藏它,而不是使用隐藏的属性,这是我从来没有见过任何人使用(除了隐藏的表单域)。

最简单的方法是在你的CSS中有这个:

 .sideDiv{display: none;} 

或者,如果你懒惰,你可以embedded到HTML元素本身:

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

然后,当你的页面加载时,它将被隐藏,你使用.show()的工作将会起作用,因为jQuery函数在dom元素的“显示”风格上运行。

使用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); }); 

FYI:隐藏元素集CSS display:none; 这将是更好的方法,以后可以使用show()方法show()

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

hidden

隐藏的全局属性是布尔属性,指示该元素还没有或不再相关。 例如,它可用于隐藏无法使用的页面元素,直到login过程完成。 浏览器不会渲染具有隐藏属性的元素。

jQuery的show改变了一个元素的style ,并不修改hidden的属性

显示

…这大致相当于调用.css(“display”,“block”)…

你会想用jQuery的attrprop来修改hidden的属性

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

除了以前的答案之外,你还可以用普通的JS做到这一点:

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