泉州工作室网站建设,软件搭建公司,wordpress 新浪博客,wordpress博客类型文章)在WEB开发中#xff0c;前台HTML中经常需要控制元素的隐藏与显示#xff0c;我们最为最常见是二级导航栏#xff08;通过鼠标的移动来触发onmouseover#xff0c;onmouseout事件来实现二级菜单的显示与隐藏#xff09;二级菜单的显示与隐藏。
然而控制元素的影响与显示有…在WEB开发中前台HTML中经常需要控制元素的隐藏与显示我们最为最常见是二级导航栏通过鼠标的移动来触发onmouseoveronmouseout事件来实现二级菜单的显示与隐藏二级菜单的显示与隐藏。
然而控制元素的影响与显示有两种方式
1、display : 设置如何及是否显示某元素
2、visibility : 设置元素可见或不可见 Example: html
head
titleHTML元素的显示与隐藏控制/title
style typetext/css
#div1,#div3{width:50px;height:50px;background:cyan;
}#div2,#div4{width:50px;height:80px;background:gray;
}
/style
script typetext/javascript
function showAndHidden1(){var div1document.getElementById(div1);var div2document.getElementById(div2);if(div1.style.displayblock) div1.style.displaynone;else div1.style.displayblock;if(div2.style.displayblock) div2.style.displaynone;else div2.style.displayblock;
}function showAndHidden2(){var div3document.getElementById(div3);var div4document.getElementById(div4);if(div3.style.visibilityvisible) div3.style.visibilityhidden;else div3.style.visibilityvisible;if(div4.style.visibilityvisible) div4.style.visibilityhidden;else div4.style.visibilityvisible;
}
/script
/head
body
divdisplay元素的位置不被占用/div
div iddiv1 styledisplay:block;DIV 1/div
div iddiv2 styledisplay:none;DIV 2/div
input typebutton οnclickshowAndHidden1(); valuedisplay切换DIV /
hr
divvisibility元素的位置仍被占用/div
div iddiv3 stylevisibility:visible;DIV 3/div
div iddiv4 stylevisibility:hidden;DIV 4/div
input typebutton οnclickshowAndHidden2(); valuevisibility属性切换DIV /
/body
/htmlResult 小结display 和visibility同时可以实现对元素的隐藏和显示区别在于visibility属性做到的是将html元素隐藏但其元素即使是隐藏状态的所在的位置独占而display属性操作html元素则不会想这样display属性操作的是元素的类型inline,block,none这些属性直接关系到元素的大小及存在与否。 用关于display和visibility曾遇到过 写二级导航栏菜单当时用display来实现二级菜单的显示与隐藏时结果发现在第一次访问或者刷新后第一次访问鼠标移动到一级菜单时二级子菜单感觉就想刷新不出来一样用visibility实现则不会出现像这样的问题。
