javascript 控制 DIV等html元素的显示和隐藏（不占位）

最新推荐文章于 2022-12-27 14:16:11 发布

rongwenbin

最新推荐文章于 2022-12-27 14:16:11 发布

阅读量9.2k

点赞数

分类专栏： JS WEB

JS 同时被 2 个专栏收录

76 篇文章

订阅专栏

WEB

25 篇文章

订阅专栏

本文介绍如何使用JavaScript实现网页元素的显示与隐藏功能，包括不同类型的HTML元素如div、table row等，并提供实际代码示例。

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

1、编写js函数

<scripttype="text/javascript">
functiondisplay(id){

       var traget=document.getElementByIdx_x(id);
        if(traget.style.display=="none"){
                traget.style.display="";
        }else{
                traget.style.display="none";
      }
    }
</script>

2.、要显示/隐藏的html元素加上id 属性

<table>

<td>控制这个tr的显示/隐藏</td>

</tr>

</table>

3、添加按钮，链接等触发js 函数

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

<ahref="#" onclick="display('menu')" >显示/隐藏</a>

javascript显示隐藏层

<div id=""style="display:none;">广告</div>
<input type="botton"onclick="函数">
<script language=javascript>
function 函数{
if(thisdiv.style.display=='none'){
thisdiv.style.display=""
}
else
thisdiv.style.display="none"
}
</script>

你先给div取个ID=“AA”thisdiv=AA

javascript隐藏/显示表单对象

<SCRIPTlanguage=javascript>
function expandIt(el) {
     whichEl =document.getElementByIdx_x(el)
     if (whichEl.style.display==    'none'){
      whichEl.style.display   = '';
     }
     else {
      whichEl.style.display   = 'none';
     }
     }
</SCRIPT>

el是对象的id，不管是tr或者table等等先设置一下id，然后进行调用。

例：

<aonclick="expandIt('ttchild'); return false" href="#">try it</a>

<trid="ttchild"><tdwidth="18">Example</td></tr>

javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位：

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白；

通过设置display属性可以使div隐藏后释放占用的页面空间。

方法一：
document.all<"PanelSMS">.style.visibility="hidden";
document.all<"PanelSMS">.style.visibility="visible";
方法二：
document.all<"PanelSMS">.style.display="none";

document.all<"PanelSMS">.style.display="inline";