div 隐藏 显示 占空间 不占空间

最新推荐文章于 2023-08-04 10:56:12 发布
最新推荐文章于 2023-08-04 10:56:12 发布
阅读量1k 收藏 2
点赞数
文章标签： javascript ViewUI

引用：http://0755-oopp.blog.163.com/blog/static/2673281201011632617841/

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

style="visibility: none;"

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

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


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

style="display: none;"

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

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

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

<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
   if(sbtitle.style.display=='block'){
   sbtitle.style.display='none';
   }else{
   sbtitle.style.display='block';
   }
}
}
</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->

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

再次升级，做两个层之间的切换：

<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
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>
<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>

//示例二

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

<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>

weixin_33875564
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中根据判断字段是否存在决定页面div是否显示
栀妹儿的炼丹炉
04-15 6454
题目就是这次的笔记概要啦： vue中（me.mobile端）根据判断（me.接收到的）某个字段存不存在 来决定页面的某个div是否显示 关键语句：在div中加入v-if <div v-if="orderDetail.memberScoreLog" style="width:100%; height:0.8rem;font-size: 0.5rem;color:rgba(0,0,0,0.54...
javascript怎么隐藏显示div
热门推荐
kakaluote1998的博客
04-13 2万+
设置方法：1、使用style对象的display属性，值为“none”可隐藏div元素，值为“block”可显示元素；2、使用style对象的visibility属性，值为“hidden”可隐藏div元素，值为“visible”可显示元素。 本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。 JS隐藏和显示div的方式有两种： 方式一：设置元素style对象中的display属性 1 2 3 var ...
html、input隐藏内容占空间与隐藏内容不占空间
UserGuan的博客
11-30 3086
html隐藏内容占空间与隐藏内容不占空间 隐藏不占用空间：display:none; <span style="display:none;">隐藏不占用空间</span> 隐藏占用空间：visibility:hidden; <span style="visibility:hidden;">隐藏占用空间</span> 隐藏input的三种...
原生js与jQuery显示隐藏div的几种方法
jakelihua
02-19 4865
简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏。
用js将div隐藏或显示
S_Q_A的博客
10-07 3971
一、隐藏且不占用页面空间 // 设置display属性 style="display: none;" document.getElementById("id").style.display="none"; //隐藏 document.getElementById("id").style.display=""; //显示 二、隐藏但仍占有页面空间，会显示空白 // 设置 visibility但是隐藏后页面显示空白 style="visibility: none;" document.getEleme
js如何设置在iframe框架中指定div不显示
10-26
在JavaScript中，隐藏或显示`iframe`框架内的`div`元素是常见的需求，尤其是在构建复杂的网页布局或交互时。以下是一些使用JavaScript实现这一功能的方法，以满足在不同上下文中控制`div`可见性的需求。 首先，我们...
CSS控制DIV层显示和隐藏的实现方法
12-11
隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，现在我把它放在抽屉里藏起来，桌子上放100钱的地方可以放在其他任何东西）。 ...
div显示隐藏效果
02-09
`visibility: hidden`会让元素在页面上占据空间但不显示内容，而`visibility: visible`则使其可见。但是，使用`visibility`属性时，元素的布局不会因隐藏而改变，而`display`属性会影响布局。 此外，现代前端框架如...
onclick事件实现div的隐藏和显示
03-01
当 `display` 属性值为 `"none"` 时，元素将不占据任何空间，看起来像是隐藏了；而当其值为 `"block"`（默认值）或其他非 `"none"` 值时，元素会正常显示。 下面是一个简单的例子，展示了如何使用 `onclick` 实现 `...
DIV的显示和隐藏.docx
11-26
另外，还可以使用`style.display`属性来切换`block`和`none`，这与`visibility`属性不同的是，`display:none`会使元素完全从布局中消失，不占位置，而`visibility:hidden`虽然元素不可见，但仍然保留其占用的空间。...
JS 控制div的可见和隐藏 display
weixin_50784508的博客
06-11 1673
【代码】JS 控制div的可见和隐藏 display。
HTML隐藏文本框
hyunbar的博客
08-23 592
1、&lt;input type="hidden" value=""&gt;&lt;/input&gt;对所有的文本框都起作用（隐藏域，多用于存数据） 2、&lt;input type="text" value="" style="display:none"&gt;&lt;/input&gt;对象隐藏后，对象不占任何空间 3、&amp
html中如何使用input表单隐藏域？
铁锤妹妹的博客
06-17 2638
1. 项目需求： 点击下面日期筛选，只显示相应条件的金额，其他条件的金额隐藏 2. 目的： 在不影响页面的情况下通过input隐藏域存储值；可以通过点击事件，获取隐藏域的值，更改p标签的值 3. 什么是input隐藏域？ html 点击事件里需要传两个参数 id代表是充值金额还是提现总额，type代表充值总额里的今日或者昨日等等 <div class="col-sm-2" style="width:calc(calc(100% - 72px)/5);background: #3B7DDD; padd
把浏览器的div的可点击性隐藏掉的方法
mengtianqq的博客
12-12 281
把浏览器的input的可点击性隐藏掉的方法 目录 1.在input控件中加入disabled="disabled"  2.在input控件中加入disabled="disabled"  1.在input控件中加入disabled="disabled"  代码：  &lt;input type="text" name="plannernam7e" id="plannername7&
多个DIV,显示一个,隐藏其他全部的实现方法
rain的专栏
04-15 3361
function showDiv(div_id,div_name,div_attribute_name)//(comtent_123,div,comtent_div){   var div_names=document.getElementsByTagName(div_name);   //alert(div_names.length);   for(var i=0;i   {    
前端笔记-thymeleaf显示数据及隐藏数据
IT1995的博客
02-24 1万+
源码如下： <form id="loginFrom" name="loginFrom" method="post" th:action="@{login}"> <input id="pointCardName" name="pointCardName" type="text" placeholder="直接填写卡密，如这个例子: QWERTYUIOP{}-ASDFGH...
html一键清空数组中的内容,js删除元素对象或其内容（div、ulli、img、input等）
weixin_31032795的博客
06-03 1914
在Web前端设计过程中，用js删除元素对象经常会用到。例如某一个页面在加载完成时显示一条新闻，这条新闻只显示一次且仅显示一小段时间，则显示完后就需要把它删除或隐藏。在 javascript 中，删除元素其实是移除元素，用 removeChild() 方法，元素不能自己删除自己，所以只能用其父元素将其删除，所以用移除孩子的方法。无论用js删除页面级元素div，还是删除列表级元素 ulli、ulol，...
js中控制隐藏div(☆)
独狼的博客
04-22 1512
代码示例 <div class="ff" id="dis1"> <label>验货联系人</label> <input type="text" name="qc.linkman" value="${(dto.qc.linkman)!''}" /> </div> var d...
【JS】JavaScript实现点击自定义区域空白处隐藏div
最新发布
owo_ovo的博客
08-04 1064
JavaScript实现点击自定义区域空白处即可隐藏指定div
vue3 设置div隐藏并占用空间
06-01
要设置一个 div 隐藏并占用空间，可以使用 CSS 属性 `visibility: hidden;`。这会将元素隐藏，但它仍然占用其在文档流中的空间。例如： ```html <div style="visibility: hidden;"> 这个 div 元素被隐藏了，但它仍然占用空间。 </div> ``` 另一种方法是使用 `opacity: 0;` 属性，这会将元素的透明度设置为零，元素不可见，但仍然占用空间。例如： ```html <div style="opacity: 0;"> 这个 div 元素被隐藏了，但它仍然占用空间。 </div> ``` 注意，使用 `display: none;` 属性会将元素从文档流中移除，不再占用空间。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值