javascript中display方法或者visibility隐藏元素实现的效果

最新推荐文章于 2024-04-29 10:40:41 发布

异想实验室

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量2.5k

点赞数 1

分类专栏： HTML JavaScript 文章标签： css3 前端 css

异想实验室

本文链接：https://blog.csdn.net/weixin_43775400/article/details/127505976

版权

HTML 同时被 2 个专栏收录

11 篇文章 2 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

在前端开发html页面的时候，可以使用js中实现，修改元素的属性，达到隐藏元素，以及隐藏后的元素的显示的效果；需要修改元素的display方法或者visibility，两种方案实现的效果不同，可参考下图中的GIF动画；

设置display隐藏后不占用原来的位置；

通过visibility进行隐藏后元素位置任然被占用。

预览效果下动图；

script主要代码；

	<script>
		test_display=function(){
			var test_div=document.getElementsByTagName('div');
			if (test_div[0].style.display!='none') {
				test_div[0].style.display='none'
			} else{
				test_div[0].style.display=''
			}
		}
		test_visibility=function(){
			var test_div=document.getElementsByTagName('div');
			if (test_div[0].style.visibility != 'hidden') {
				test_div[0].style.visibility = 'hidden'
			} else{
				test_div[0].style.visibility = 'visible';
			}
		}
	</script>

HTML全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素隐藏</title>
</head>

<body>
	设置display隐藏后不占用原来的位置，<br>而通过visibility进行隐藏后元素位置任然被占用。<br>
	
    <button onclick="test_display()">display隐/显</button>
	<button onclick="test_visibility()">visible隐/显</button>
    <div style="background-color:rgb(255, 0, 149);height: 100px; width: 200px; ">
		元素内的内容
	</div>
	元素外的内容
	
	
	<script>
		test_display=function(){
			var test_div=document.getElementsByTagName('div');
			if (test_div[0].style.display!='none') {
				test_div[0].style.display='none'
			} else{
				test_div[0].style.display=''
			}
		}
		test_visibility=function(){
			var test_div=document.getElementsByTagName('div');
			if (test_div[0].style.visibility != 'hidden') {
				test_div[0].style.visibility = 'hidden'
			} else{
				test_div[0].style.visibility = 'visible';
			}
		}
	</script>


</body>
</html>

以上为，javascript中display方法或者visibility隐藏元素实现的效果全部代码；

异想实验室

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript中display方法或者visibility隐藏元素实现的效果

在前端开发html页面的时候，可以使用js中的修改元素的属性，达到隐藏元素，以及隐藏后的元素的显示的效果；需要修改元素的display方法或者visibility，两种方案实现的效果不同，可参考下图中的GIF动画；以上为，javascript中display方法或者visibility隐藏元素实现的效果全部代码；通过visibility进行隐藏后元素位置任然被占用。设置display隐藏后不占用原来的位置；
复制链接

扫一扫