设置块级元素的隐藏和显示

最新推荐文章于 2024-06-17 13:44:18 发布

流沙的牵挂

最新推荐文章于 2024-06-17 13:44:18 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_27615455/article/details/79663752

前端专栏收录该内容

7 篇文章

订阅专栏

设置块级元素的隐藏和显示

Html

<div id="sel_1" class="col-xs-12 col-sm-12" style="visibility: hidden;height: 0px;">				
	<label class="form-label col-xs-8 col-sm-6">id</label>						
	<input id="type"  type="password" class="input-text" autocomplete="off"						
</div>
<a href="javascript:void(0);" onclick="hiden()" class="btn btn-primary radius">点击隐藏/显示</a>

JavaScript

<script>
			function hiden() {
				if(document.getElementById('sel_1').style.visibility == "hidden") {
					document.getElementById('sel_1').style.visibility = 'visible';
					document.getElementById('sel_1').style.height = '20%';
				} else {
					document.getElementById('sel_1').style.visibility = 'hidden';
					setTimeout(hiden_2, 1000);//设置延时

				}

			}

			function hiden_2() {
				document.getElementById('sel_1').style.height = '0';
			}
		</script>