实践 - 隐藏显示

本文导航

  1. 本次实践的主要训练知识点
  2. 详解

  • 作者：KK

  • 发表日期：2016.2.20

本次实践的主要训练知识点

  • 操作Dom元素的实践体验

  • 通过Dom元素的style属性动态修改元素样式

  • 元素内容根据其它东西的状态改变自身状态的逻辑判断

这里教你通过JS操作DOM元素的样式属性值(那个display属性)来实现隐藏显示

一句代码演示:document.getElementById('xxx').style.display = 'none';这样就隐藏掉了,如果将display属性的值改成block或者inline和inline-block等就会显示,并且变成相应的块级元素/联级元素

详解

控制隐藏显示就先要得到元素对象

然后访问他的style属性,这个style属性是一个对象,进一步访问它的display属性,设置这个属性的值就可以,并且它跟CSS属性名是对应的

完成例子代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>隐藏显示控制</title>
<script type="text/javascript">
function test(){
	var contentDiv = document.getElementById('content');
	if(contentDiv.style.display == 'none'){
		alert('亲,已经隐藏掉啦!刷新再来玩好不好!');
		return; //没有返回值,反正就是返回,不运行后面的所有代码了
	}
	contentDiv.style.display = 'none';
}
</script>
</head>
<body>
	<div id="content" style="width:100px; height:100px; background:red;">2222</div>
	<button type="button" onclick="test()">隐藏#content</button>
</body>
</html>

通常网页效果中都会有点击一下隐藏,再点一下显示的控制,再来完整一点的代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>隐藏显示控制</title>
<script type="text/javascript">
function test(){
	var contentDiv = document.getElementById('content');
	var button = document.getElementById('btn'); //按钮标签对象
	if(contentDiv.style.display == '' || contentDiv.style.display == 'block'){
		contentDiv.style.display = 'none';
		button.innerHTML = '显示#content';
	}else{
		contentDiv.style.display = 'block';
		button.innerHTML = '隐藏#content';
	}
}
</script>
</head>
<body>
	<button type="button" onclick="test()" id="btn">隐藏#content</button><br/><br/>
	<div id="content" style="width:100px; height:100px; background:red;">2222</div>
</body>
</html>

效果如下: