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

本文介绍如何通过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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值