style属性中display和visibility控制可见性的不同

最新推荐文章于 2024-07-21 23:25:11 发布

波哥的技术积累

最新推荐文章于 2024-07-21 23:25:11 发布

阅读量5.3k

点赞数

分类专栏： css js 文章标签： button xhtml image input function html

本文链接：https://blog.csdn.net/woshisap/article/details/6966409

版权

js 同时被 2 个专栏收录

79 篇文章 0 订阅

订阅专栏

css

36 篇文章 0 订阅

订阅专栏

1：使用display属性实现的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>display属性控制的图片隐藏与显示</title>
<script type="text/javascript">
	function showImage() {
		var image = document.getElementById('successImg');
		image.style.display = 'block';
	}
	
	function hideImage() {
		var image = document.getElementById('successImg');
		image.style.display = 'none';
	}
</script>
</head>

<body>
  <div><img id="successImg" src="images/success.jpg" width="200" height="200"/></div>
  <input type="button" name="showButton" value="用display属性显示图片" οnclick="showImage();"/>
  <input type="button" name="showButton" value="用display属性隐藏图片" οnclick="hideImage();"/>
</body>
</html>

当点击"用display属性显示图片"按钮时的效果图如下：

当点击"用display属性隐藏图片"按钮时的效果图如下：

2：使用visibility属性实现的效果

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>visibility属性控制的图片隐藏与显示</title>
<script type="text/javascript">
	function showImage() {
		var image = document.getElementById('successImg');
		image.style.visibility = 'visible';
	}
	
	function hideImage() {
		var image = document.getElementById('successImg');
		image.style.visibility = 'hidden';
	}
</script>
</head>

<body>
  <div><img id="successImg" src="images/success.jpg" width="200" height="200"/></div>
  <input type="button" name="showButton" value="用visibility属性显示图片" οnclick="showImage();"/>
  <input type="button" name="showButton" value="用visibility属性隐藏图片" οnclick="hideImage();"/>
</body>
</html>

程序正常显示效果图：