利用JavaScript隐藏和显示div元素完整版

最新推荐文章于 2024-05-03 12:12:21 发布

汤姆比基尼

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量1.2k

点赞数

分类专栏：前端三剑客网页构造文章标签： js

本文链接：https://blog.csdn.net/weixin_44070058/article/details/109615092

版权

前端三剑客网页构造专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

Js代码收藏代码
style=“visibility: none;”

document.getElementById(“typediv1”).style.visibility=“hidden”;//隐藏

document.getElementById(“typediv1”).style.visibility=“visible”;//显示

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

Js代码收藏代码
style=“display: none;”

document.getElementById(“typediv1”).style.display=“none”;//隐藏

document.getElementById(“typediv1”).style.display="";//显示

此JS代码中，没有用try——Catch捕获错误，代码如下：

Js代码收藏代码

onMouseMove=‘showhidediv(“msg”)’; 这里是鼠标动作，可以替换成Click或其他！

做两个层之间的切换：

Js代码收藏代码

//示例二

显示一个层的同时隐藏另一个层

Html代码收藏代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function showhidediv(id){

var age=document.getElementById("msg_2");

var name=document.getElementById("msg_1");

if (id == 'name') {

if (name.style.display=='none') {

age.style.display='none';  

name.style.display='block';  
}

} else {

if (age.style.display=='none') {

name.style.display='none';  

age.style.display='block';  
}

}

}

-->

</script>

</script>

</head>

<body>

<div id="msg_1" style="display:block;float:left;" οnclick='showhidediv("age")';>

<p id="photoTitle" >单击此处添加描述</p></div>

<div id="msg_2" style="display:none;float:left;" >

<form id="">

<textarea class="textarea" id="" name=""></textarea>

<div class="">

<input type="button" value="保存" class="" id="">

<input type="button" value="取消" class="" id="" οnclick='showhidediv("name")';>

</div>

<input type="hidden" name="" value=""></form>

</div>

</body>

</html>

汤姆比基尼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript隐藏和显示div元素完整版

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白Js代码收藏代码style=“visibility: none;”document.getElementById(“typediv1”).style.visibility=“hidden”;//隐藏document.getElementById(“typediv1”).style.visibility=“visible”;//显示通过设置display属性可以使div隐藏后释放占用的页面空间如下Js代码收藏代码s
复制链接

扫一扫