HTML元素隐藏和显示
浏览数：24 /
时间：2015年06月09日
在web前端开发过程中，经常会用到隐藏和显示元素的方法
总结：1.通过JS或Jquery控制
2.通过CSS样式控制
一、Js或jquery （jquery为例)
1.隐藏元素 使用hide()方法，如下图：
方法：hide()
作用: 隐藏显示的元素
示例:
$(“p”).hide();
HTML 代码:
<p>Hello word</p>
结果:
<p style="display:none">Hello word</p>
2.显示隐藏的元素，使用show()方法，如下图：
方法: show();
作用：显示隐藏的匹配元素
示例:
$("p").show();
HTML 代码:
<p style="display:none">Hello word</p>
结果：
<p style="display:block">Hello word</p>
二、css 样式控制
1.通过visibility
visibility: hidden, visible
visibility: 控制页面元素的显示和隐藏，不空值元素的位置特征。
hidden:隐藏元素
visible:显示元素
当元素在页面是隐藏时，会占据一个显示块，其它的元素不能使用这个位置。当元素隐藏时，它不能接收事件。
2.通过display
display: block, inline, none
none:从页面中移除这个元素，当然元素的位置也被移除。
inline:此元素不会占据一行，和其它的元素一起组合显示。
block:此元素占据一行，单独显示。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
