如何在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的attr
或prop
来修改hidden
的属性
$('.sideDiv').attr('hidden', false); $('.sideDiv').prop('hidden', false);
除了以前的答案之外,你还可以用普通的JS做到这一点:
document.querySelector(".sideDiv").setAttribute("hidden", "false");