怎么通过display或visibility来实现HTML元素的显示与隐藏

发布时间:2020-09-28 16:26:14 作者:小新
来源:亿速云 阅读:134

怎么通过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>

感谢各位的阅读!看完上述内容,你们对怎么通过display或visibility来实现HTML元素的显示与隐藏大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. display,opacity,visibility,position隐藏元素的实质
  2. 通过display或visibility如何实现HTML元素的显示与隐藏

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

visibility display isi

上一篇:html中area图片热点的使用方法

下一篇:html+css+javascript实现列表循环滚动的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》