HTML元素显示与隐藏

在WEB开发中，前台HTML中经常需要控制元素的隐藏与显示，我们最为最常见是二级导航栏（通过鼠标的移动来触发onmouseover，onmouseout事件来实现二级菜单的显示与隐藏）二级菜单的显示与隐藏。

然而控制元素的影响与显示有两种方式：

1、display : 设置如何及是否显示某元素

2、visibility : 设置元素可见或不可见

Example:

<html>
<head>
<title>HTML元素的显示与隐藏控制</title>
<style type="text/css">
#div1,#div3{width:50px;height:50px;background:cyan;
}#div2,#div4{width:50px;height:80px;background:gray;
}
</style>
<script type="text/javascript">
function showAndHidden1(){var div1=document.getElementById("div1");var div2=document.getElementById("div2");if(div1.style.display=='block') div1.style.display='none';else div1.style.display='block';if(div2.style.display=='block') div2.style.display='none';else div2.style.display='block';
}function showAndHidden2(){var div3=document.getElementById("div3");var div4=document.getElementById("div4");if(div3.style.visibility=='visible') div3.style.visibility='hidden';else div3.style.visibility='visible';if(div4.style.visibility=='visible') div4.style.visibility='hidden';else div4.style.visibility='visible';
}
</script>
</head>
<body>
<div>display：元素的位置不被占用</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" οnclick="showAndHidden1();" value="display切换DIV" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" οnclick="showAndHidden2();" value="visibility属性切换DIV "/>
</body>
</html>

Result：

小结：

display 和visibility同时可以实现对元素的隐藏和显示，区别在于visibility属性做到的是将html元素隐藏，但其元素（即使是隐藏状态）的所在的位置独占，而display属性操作html元素则不会想这样，display属性操作的是元素的类型inline,block,none这些属性直接关系到元素的大小及存在与否。

用关于display和visibility曾遇到过：

写二级导航栏菜单，当时用display来实现二级菜单的显示与隐藏时，结果发现在第一次访问或者刷新后第一次访问，鼠标移动到一级菜单时二级子菜单感觉就想刷新不出来一样，用visibility实现则不会出现像这样的问题。

HTML元素显示与隐藏相关推荐

angularjs ng-click传参控制ng-repeat元素显示与隐藏
ng-click传参控制ng-repeat元素显示与隐藏说明: 1.使用ng-repeat显示参数 2.通过ng-click按钮显示或隐藏内容.通过添加shows和id两个参数控制显示. <! ...
使用v-show v-if 设置元素显示和隐藏
一丶一般情况我们可以设置元素的display属性来控制元素显示和隐藏 display: none; //元素不会显示 display: block; //显示为块级元素,元素后面带有换行符 dis ...
元素显示和隐藏的过渡效果
开端做css效果时,会有这种情况鼠标移动上去,元素显示出来,鼠标移走,元素隐藏如果仅仅是这个效果的话,实现起来比较简单,如下 <head><style>.main {he ...
html行内元素隐藏,使用v-show v-if 设置元素显示和隐藏
一丶一般情况我们可以设置元素的display属性来控制元素显示和隐藏 display: none; //元素不会显示 display: block; //显示为块级元素,元素后面带有换行符 dis ...
jQuery中用来让元素显示和隐藏的函数
我们所以会使用jQuery,是因为在这个jQuery这个库中有很多的函数已经写好,我们可以直接拿过来去用,于是我们知道了解一些函数是非常重要的,在这个地方我们就介绍一些函数. 首先介绍的函数是如何让h ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
CSS元素显示与隐藏
display显示 display: none; 隐藏某个元素特点:隐藏之后,不保留位置 display: block; 显示某个元素 visibility可见性 visibility: hidde ...
点击元素，目标元素显示和隐藏。点击其他非指定区域，目标元素隐藏
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> ...
Vue.js学习之路（五）控制页面元素显示和隐藏
在HTML中国我们通常是直接使用display的属性值,来控制元素的显示与隐藏,在vue中就主要通过两种方式v-if和v-show 两者都是通过对引号中的值或者表达式进行true或false进行判断实 ...

HTML元素显示与隐藏

Example:

Result：

HTML元素显示与隐藏相关推荐

最新文章

热门文章