让一个div消失

最新推荐文章于 2021-06-03 15:18:44 发布
最新推荐文章于 2021-06-03 15:18:44 发布
阅读量818 收藏 2
点赞数 2
分类专栏： CSS专栏 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47170819/article/details/107029056
版权

让一个div消失

1.position:absolute/relative/fixed + 方位 top/bottom/left/right: -9999px
2.display:none 此元素不会被显示。
3.visibility:hidden 元素是不可见的。
4.width:0 + overflow:hidden 内容会被修剪，并且其余内容是不可见的
height:0 + overflow:hidden
5.margin-top/bottom/left/right:-9999px; 移除界面
6.background-color:transparent 把背景色设置为透明
7.opacity:0 把背景色设置为透明的第二种方法
8.transform: translateX(-9999px)/translateY(-9999px)/translate(-9999px,-9999px)平移出去
9.transform: scale(0) 缩放

咸鱼一位
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试：怎么让一个div消失在视野里？
小隐的博客
05-07 678
怎么让一个div消失在视野里？ 前两天面试被问到了这道题，当时回答了4种方案，面试结束后想想其实回答的很烂，面试回答问题的时候尽量做到先分类，然后按照分类回答，这样即显得有条理，面试官听的也清楚，其次也不容易遗漏内容。 我个人认为解决方案可以分为以下两大类： 视野内隐藏 移动到视野外 下面来具体看一下每类的具体解决方案： #1. 视野内隐藏 1.设置高度宽度为0 div { height: 0; width: 0; } 2.设置透明度为0 div { opacity: 0; }
JS控制一个DIV层在指定时间内消失的方法
10-26
综上所述，通过结合HTML、CSS和JavaScript，我们可以实现一个功能，让一个具有特定样式的<div>层在3秒钟后自动消失。这种技术在网页开发中非常实用，可以用于创建各种动态效果，如过渡动画、提示信息等。同时，这也...
让元素div消失在视野中
weixin_30552811的博客
08-28 481
让元素div消失在视野中1.position:absolute/relative/fixed + 方位 top/bottom/left/right: -9999px2.display:none3.visibility:hidden4.width:0 + overflow:hidden height:0 + overflow:hidden5.margin-top/bottom/left/ri...
html让元素消失,使用css来让div进行隐藏或者消失
weixin_29492649的博客
06-03 626
1.使用透明度opacity:01 2 3 4 5 6 7 div{ width: 200px;height: 200px;}8 .div1 {background-color: #0000FF;opacity: 0;}9 .div2 {background-color:...
div的显示和消失
changhenshui1990的博客
03-14 2195
1.显示 $("#keyword_id_rfInfos_divAddBack").css("display", "block"); $("#keyword_id_rfInfos_divAddFront").css("display", "block"); 或 $("#keyword_id_containerGoods_divEditBack").show(); $
让元素在页面中消失的方法
Slueia的博客
03-07 1066
1.display:none;（将整个元素隐藏，并且不会占据任何的空间） 2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小） 3.设定它的位置,让其消失不见： position:absolute或fixed，用z-index遮盖。 4.overflow:hidden将要隐藏的元素移除父元素的范围。 5.设置元素为透明：即opacity:0； 6.设置元素的clip（在新的css中使用clip-path来代替clip） 要让其生效，必须给元素的position的值设
点击div以外的部分，div消失不见
10-13
点击div以外的部分，div消失不见
jQuery弹出div层过2秒自动消失
10-21
在本教程中，我们将探讨如何利用 jQuery 实现一个弹出的 div 层，并让它在出现2秒后自动消失。这对于创建提示信息、通知或者简单的警告对话框非常有用。 首先，我们需要理解基本的 jQuery 语法。`$` 符号是 jQuery ...
JS/jQuery实现DIV延时几秒后消失或显示的方法
10-18
主要介绍了JS/jQuery实现DIV延时几秒后消失或显示的方法,结合实例形式分析了javascript使用setTimeout及jQuery使用delay方法实现延迟显示功能的相关操作技巧,需要的朋友可以参考下
css div标签必须用<div></div>关闭
q285661571的专栏
05-23 602
ok!
div+css弹出层带关闭按钮
09-01
整理div+css弹出层，带关闭按钮供大家参考
关闭和定时显示DIV
weixin_30563319的博客
11-23 141
1 <script type="text/javascript"> 2 $(function(){ 3 $('#ad1').css('display','block'); 4 5 }) 6 function close1(){ 7 // $('#ad1').css('display','non...
div下js失效的问题
dylanwang_cn的博客
08-01 735
测试修改项目的时候js突然失效，方法能进去但是不会执行方法内的jQuery代码 最开始是使用的,后来换成的，如下   此代码运行一段时间没问题，后来在修改图片缩小放大的功能时，上面的代码就罢工了，两者没有什么关系，只是相邻的两个div，搜了很多方法没解决掉， 后来换成下面的标签就可以了   还有就是注意js的引用顺序，顺序
2021-02-26 b站面试题
wonderfilled的博客
02-26 715
几道前端经典面试题 technic: 这种需求在我之前的项目当中非常常见，刚开始我只用了xxx，后来平时看掘金，看了博客后又发现有其他方式也可以实现，就记下来了， 1.盒子水平居中的五大方案 html body 元素默认宽高是 0 1 定位：父级absolute 子级relative 三种 margin-left margin-top 需要有宽高 transfrom：translate 不需要有宽高（兼容性不好） margin:auto 不需要考虑宽高 有宽高 2 flex布局 主轴 侧轴 水平垂直
浏览器出现滚动条和消失页面不滚动解决方案
freedomlulux的博客
04-19 1995
在编写前端代码时候出现点击按钮过后，浏览器出现滚动条消失和不滚动。 将下面这段代码复制至页面开头即可 <style> html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width...
前端知识体系(6)-css篇
weixin_39818813的博客
05-19 358
以下内容为 css 基础篇（1） 1. 如何解决 a 标点击后 hover 事件失效的问题？ 改变 a 标签 CSS 属性的排列顺序： （爱恨原则）link -> visited -> hover -> active a:link：未访问的样式 a:visited：已经访问的样式 a:hover：鼠标移上去时的样式 a:active：鼠标按下的样式 按照这样书写： 可以解决 a:link 样式被 a:visited 样式覆盖问题。 在 CSS 中，如果对于相同元素针对不同条件的定义
让div隐藏消失JQ代码写法
别忘了还是诗歌和远方
09-05 1957
$("#divOperate").css("display", "block");//显示 $("#divOperate").css("display", "none");//消失
css3、jq、js三种方法实现逐渐消失
热门推荐
香蕉你个芭呐呐的博客
11-22 1万+
css3 aniamtion、jq fideOut settimeOUt
如何用vue写一个div淡出消失的动画
最新发布
06-08
你可以使用Vue的transition组件来实现这个效果。具体实现步骤如下： 1. 在Vue组件中，使用`<transition>`标签包裹需要添加动画效果的元素。 2. 在`<transition>`标签中，使用`name`属性定义动画的名字，比如`name="fade"`。 3. 定义CSS样式，控制元素的淡入淡出效果。可以使用Vue提供的预定义类名，比如`.fade-enter-active`、`.fade-leave-active`等，也可以自定义类名。 4. 当元素需要淡出时，可以使用Vue提供的`v-if`或`v-show`指令来控制元素的显示与隐藏。 下面是一个简单的示例代码： ```html <template> <div> <button @click="show = !show">Toggle</button> <transition name="fade"> <div v-show="show">Hello, world!</div> </transition> </div> </template> <script> export default { data() { return { show: true, }; }, }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 这个示例中，点击按钮可以控制文本的显示与隐藏，并添加淡出效果。`name="fade"`定义了动画的名字，CSS样式中`.fade-enter-active`和`.fade-leave-active`分别定义了元素进入和离开时的动画效果，`.fade-enter`和`.fade-leave-to`分别定义了元素进入和离开时的起始和结束状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值