动态控制html元素显示/隐藏

最新推荐文章于 2023-10-11 10:12:40 发布

Sofia_li

最新推荐文章于 2023-10-11 10:12:40 发布

阅读量6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/guolilitony/article/details/47804531

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过JavaScript实现HTML元素的动态显示和隐藏，包括使用DOM操作和JavaScript内置方法来改变元素的可见状态，以增强网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态控制html元素显示/隐藏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态控制html元素显示/隐藏</title>

<script language=javascript>
/**
	javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位
*/

//控制显现方法1（方法1隐藏后 页面的位置不被占用，类似于.net验证控件的Display=Dynamic）
function display(id){

        var traget=document.getElementById(id);

         if(traget.style.display=="none"){

                 traget.style.display="inline";

         }else{

                 traget.style.display="none";

       }
}

//控制显现方法2（方法2隐藏后 页面的位置还被控件占用，只是不显示，类似于.net验证控件的Display=Static）
function display2(id){

        var traget=document.getElementById(id);

         if(traget.style.visibility=="hidden"){

                 traget.style.visibility="visible";

         }else{

                 traget.style.visibility="hidden";

       }
}

</script>

</head>

<body>

<table width="445" height="182" border="1" cellpadding="2" cellspacing="2" id="tab1">
  <tbody>
    <tr>
      <td width="124">控制这个tab的隐藏与显现</td>
      <td width="119"> </td>
      <td width="102"> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </tbody>
</table>

<input type="button" onclick="display2('tab1')"  value="table 显示/隐藏"/>

<table>

    <tr id="menu" >  
        <td height="51">控制这个tr的显示/隐藏</td>
    </tr>

</table>

<input type="button" onclick="display('menu')"  value="tr 显示/隐藏"/>


</body>
</html>