通过display或visibility来实现HTML元素的显示与隐藏
导读：收集整理的这篇文章主要介绍了通过display或visibility来实现HTML元素的显示与隐藏，觉得挺不错的，现在分享给大家，也给大家做个参考。 有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通...
收集整理的这篇文章主要介绍了通过display或visibility来实现HTML元素的显示与隐藏，觉得挺不错的，现在分享给大家，也给大家做个参考。 有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibilITy来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 复制代码代码如下:
html>
head>
title> HTML元素的显示与隐藏控制/title>
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" onclick="showAndHidden1(); " value="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" onclick="showAndHidden2(); " value="DIV切换" />
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 通过display或visibility来实现HTML元素的显示与隐藏
本文地址： https://pptw.com/jishu/587971.html