元素的隐藏和显示

最新推荐文章于 2023-09-06 18:26:27 发布
最新推荐文章于 2023-09-06 18:26:27 发布
阅读量329 收藏
点赞数 1
分类专栏： CSS 文章标签： 元素的隐藏和显示 display:none visibility：hidden overflow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Allenyhy/article/details/81516423
版权

1.display:none

<!DOCTYPE html>
<html>
<head>
<style>
.aaa,.bbb,.ccc{
background-color:red;
}
</style>
</head>
<body>
<div class="aaa">
<p>我是一号元素</p>
</div> 
<div class="bbb">
<p>我是二号元素</p>
</div>
<div class="ccc">
<p>我是三号元素</p>
</div>
</body>
</html>

现在为class="bbb"的盒子设置display:none;  看一下效果如下图所示：

可以看出整行元素完全消失了！并且不占用空间！

display:none;       1）控制元素是否显示或隐藏       2）所有的后代元素都隐藏，好像这个元素不存在，完全消失

 

2.visibility：hidden

接下来我们为第二行添加属性visibility：hidden；

可以看出元素虽然没有显示，但是仍然占据该有的空间位置。

visibility的取值通常为visible和hidden，默认为visible；

visibility:hidden;      1）元素的大小不变，可理解为透明       2）子元素设置为visibility：visible;子元素仍然可见，如下图所示：

3.overflow

overflow的取值一般为：auto. hidden, scroll;

这里我们就主要讲讲，文字超过内容区时如何用省略号来表示

这个需要三条语句一起来完成：

p{
text-overflow:ellipsis;         /*文本超出部分用省略号表示*/
white-space: nowrap;            /*超过不换行*/
overflow:hidden;                /*超出的部分隐藏起来*/
}

上面的语句还需要width设置小一点，这里我们设置的是50px;

 

 

本博客由博主原创，如需转载需说明出处！谢谢支持！

绵羊万
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
NUI-API文件(开发必备)
01-23
基于MINI UI的EOS开发平台前端技术的API文件，可以帮助初学者更好在EOS_Platform7.5开发平台上进行前端开发。
css隐藏元素方式
yp2294188167的博客
11-09 304
先附上css代码 .box { width: 100px; height: 100px; background-color: red; } /* 隐藏元素 */ .hidden { width: 100px; height: 100px; background-color: #bfa; visibility: hidd...
js动态设置div显示与隐藏
c15162的博客
05-12 2469
$("#check").addClass("hidden"); $("#check_err").removeClass("hidden"); $("#check_err").css("display","none"); $("#check_err").css("display","block"); $("#check_err").show(); $("#check_err").hide();
elementui对分页的封装使用
哆来A梦没有口袋的博客
03-10 482
在elementUI中有分页查询的插件 - 但是在项目中使用，可以对其进行二次封装，让分页插件使用起来更加方便快捷 <template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="currentPage" :page-size.
Vue 分页组件化
haeasringnar的博客
05-25 348
组件代码 <template> <div :class="{'hidden':hidden}" > <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layo...
JDK15的隐藏性
qq_29860591的博客
10-28 323
JEP 371:Hidden Classes(隐藏类) 该提案通过启用标准 API 来定义无法发现且具有有限生命周期的隐藏类，从而提高 JVM 上所有语言的效率。JDK内部和外部的框架将能够动态生成类，而这些类可以定义隐藏类。通常来说基于JVM的很多语言都有动态生成类的机制，这样可以提高语言的灵活性和效率。 隐藏类天生为框架设计的，在运行时生成内部的class。 隐藏类只能通过反射访问...
CssClass="Hidden"和Visible="False"
weixin_30853329的博客
04-10 509
<asp:Label ID="lblNoCustomTableItemCheckedInfo" runat="server" CssClass="Hidden"></asp:Label> <asp:Label ID="lblNoCustomTableItemCheckedInfo" runat="server" Visible="False"></asp...
jQuery控制元素隐藏和显示
10-20
本篇文章主要介绍了jQuery控制元素隐藏和显示的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
jQuery元素的隐藏与显示实例
10-24
主要介绍了jQuery元素的隐藏与显示的方法,实例分析了hide与show的使用技巧,需要的朋友可以参考下
【JavaScript源代码】jQuery实现HTML元素隐藏和显示.docx
12-29
jQuery实现HTML元素隐藏和显示 　让我们来模仿一下淘宝网当你搜索某个商品的时候，那种显示全部品牌和显示部分品牌的功能。　首先我们来理清一下思路：　1、一开始需要先隐藏需要隐藏的元素　2、你需要通过jquery...
javascript 控制 html元素 显示/隐藏实现代码
10-29
javascript 控制 html元素 显示/隐藏，下面是一些逐步的实现原理。
【20180530】获取ul中class没有hidden属性的元素
chensy的博客
05-30 835
.child_ul:not(.hidden)
关于ie下添加class hidden 无法重新渲染页面的问题
weixin_34281477的博客
03-14 146
最近遇到个问题，在图片上传的时候会有个蒙层，上传成功后蒙层消失，但是在ie下却无法点击删除图片的按钮，经过调试发现当给蒙层添加hidden的class之后，并不会及时去渲染页面，需要等几秒才行，或者在页面的其他位置点几下，后来通过jquery的hide()解决了这个问题，看来后期添加class来控制显示隐藏的也比较坑，要慎重考虑了。 转载于:https://www.cnblogs.com/Amay...
h5 hidden属性：
弱智de克星
02-21 2857
hidden属性：" TITLE="h5 hidden属性：" /> h5中增加了hidden属性，当某个元素如图片在页面加载时不需要渲染，则 ①可以使用hidden属性。当需要使用图片是则可以用removeAttr()方法. ②可以使用class="hidden"。当需要使用图片是则可以用removeClass()方法. hidden属性：" TITLE="h5 hidden属性：" />
用js来控制标签的隐藏和显示
zhouchang111的博客
03-08 5392
1，首先来说一下标签的隐藏 （1），在标签中添加css属性即可{display:none} （2），在标签中添加类hidden  如（haml例子：%input#diaplay.hidden） （html例子：&lt;input type="hidden"&gt;）   2，标签的显示与隐藏 只需两个函数即可： $().removeClass('hidden');  //移除hi...
如何隐藏mui TextField标签？
最新发布
湖北太米网络科技有限公司
09-06 71
要隐藏 MUI (Material-UI) 的 TextField 标签，您可以使用 CSS 来修改其样式。以下是一种可能的方法： 为 TextField 添加一个自定义的 CSS 类名或 ID，以便在 CSS 中进行样式修改。例如，假设您给 TextField 添加了 ​​custom-textfield​​ 类名： 在您的 CSS 文件或样式块中，使用 ​​display: none;...
普元nui:Forms
剑来
08-01 2311
DataBinding数据绑定 jsp //数据表格 <div id="datagrid" class="nui-datagrid" style="width: 500px; height: 320px;" idField="id" url="../firstCtrler/gridList.do" multiSelect="true" allowResize="true" allow...
14.元素的显示与隐藏
potato123232的博客
03-09 1490
显示与隐藏多用于这种广告 你点这个叉，这个广告就会消失(隐藏)，当我们刷新后，这个广告就又回来了 显示与隐藏中有三个属性，分别是display,visibility与overflow 目录 1display 1.1隐藏元素 display:none 2visibility 2.1hidden 2.2visible 2.3inherit 2.4collapse 2.4.1非表格元素 2.4.2表格元素 3overflow 3.1hid......
CSS display(显示)详解 与 visibility（可见性）详解[第七天]
PBitW的博客
08-13 972
display list-item【无效果，懵逼】 run-in【都不支持，忽略】 initial content table visibility 隐藏元素(display:none/visibility:hidden/visibility:collapse) 详解visibility:collapse 改变一个元素显示
vue控制元素的显示和隐藏
05-01
Vue通过条件渲染指令可以控制元素的显示和隐藏。常见的条件渲染指令有v-if、v-else-if和v-else。 在模板中，我们可以使用v-if指令来根据数据的真假值进行条件渲染，如果为true就渲染该元素，否则就不渲染。例如： ```html <template> <div> <p v-if="isShow">这是要显示的内容</p> </div> </template> ``` 当isShow属性为true时，就会把`<p>`元素渲染出来，否则就不会显示。 v-else-if指令和v-else指令可以实现多个条件的选择渲染。例如： ```html <template> <div> <p v-if="isShow">这是要显示的内容</p> <p v-else-if="isShow2">这是第二个要显示的内容</p> <p v-else>这是要隐藏的内容</p> </div> </template> ``` 当isShow属性为true时，就会把第一个`<p>`元素渲染出来；当isShow2属性为true时，就会把第二个`<p>`元素渲染出来；当前两个属性都为false时，就会把第三个`<p>`元素渲染出来。 此外，我们还可以使用v-show指令来实现元素的显示和隐藏。和v-if不同的是，v-show不是通过添加和删除DOM节点来实现的，而是通过修改CSS属性display的值来控制元素的显示和隐藏。例如： ```html <template> <div> <p v-show="isShow">这是要显示的内容</p> </div> </template> ``` 当isShow属性为true时，就会把`<p>`元素显示出来；当isShow属性为false时，就会把`<p>`元素隐藏起来。需要注意的是，v-show指令不支持v-else-if和v-else指令。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值