jQuery与原生JS实现Div显示与隐藏的几种方式

jQuery控制Div显示与隐藏

利用jQuery库可以便捷地控制Div元素的显示与隐藏状态。

具体实现显示效果的方法如下。

$("#id").show()

实现隐藏效果的方法如下。

$("#id").show()

原生JS控制Div显示与隐藏及属性区别

使用原生JavaScript同样可以实现Div的显示与隐藏控制。

通过修改div的visibility属性可以控制其显示或隐藏，但需要注意的是，使用此方法隐藏元素后，其在页面中占据的空间仍然保留，不会折叠。

style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示

若希望元素隐藏后不再占用页面空间，可以通过设置display属性来实现，具体操作如下。

style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示