隐藏一个元素最为常用的属性是visibility和display,这两个属性都可以将指定元素设置为隐藏状态,或许还有很多朋友不知道它们两者之间的区别,下面就通过代码实例做一下简单介绍。

代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
div
{
  width:100px;
  height:100px;
  background:red;
  margin-top:10px;
}
</style>
<script type="text/javascript"> 
window.onload=function()
{
  var otop=document.getElementById("top");
  var topbt=document.getElementById("topbt");
    
  var obottom=document.getElementById("bottom");
  var bottombt=document.getElementById("bottombt");
    
  topbt.onclick=function(){otop.style.display="none"}
  bottombt.onclick=function(){obottom.style.visibility="hidden"}
}
</script> 
</head> 
<body> 
<div id="top"></div>
<input type="button" id="topbt" value="点击隐藏" />
<div id="bottom"></div>
<input type="button" id="bottombt" value="点击隐藏" />
</body> 
</html>

代码描述:visibility和display 设置元素 显示和隐藏区别,visibility和display设置元素显示和隐藏区别代码下载



4 5



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 js操作元素 js获取元素 js添加删除元素 js设置元素 javascript操作元素 javascript获取元素 javascript添加删除元素 javascript设置元素

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到