元素隐藏的不同方式

最新推荐文章于 2022-05-18 11:07:00 发布
最新推荐文章于 2022-05-18 11:07:00 发布
阅读量124 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZXR__/article/details/121070906
版权

在项目中往往需要用到不同的隐藏元素的方法，每种方法都有不同的特性

效果如下

 1.第一种方式：display:none        点击隐藏后不会占位

 效果如下：

 2.第二种方式：visibility: hidden        点击隐藏后会占位

效果如下

3.第三种方式：opacity:0        点击后占位

效果如下 

 4.第四种方式：height:0;border:0        点击后占位

效果如下 

 

ZXR__
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css常见隐藏元素的方法
Dear
11-27 271
1、使用 display：none隐藏元素，隐藏后该元素不会在页面中占据位置，也不会响应绑定的监听事件 2、使用visibility:hidden隐藏元素，隐藏后该元素会在页面中占据位置，但是不会响应绑定的监听事件 3、使用 optaicy：0隐藏元素，隐藏后该元素会在页面中占据位置，会响应绑定的监听事件 4、通过绝对定位将元素移除到可视区域外 5、通过 translate: scale(0, 0)，来缩放该元素，以实现隐藏。元素会在页面中占据位置，但是不会响应绑定事件 <!DOCTYPE htm.
两种隐藏元素方式【display: none】和【visibility: hidden】的区别
weixin_30505225的博客
08-26 269
此随笔的灵感来源于上周的一个面试，在谈到隐藏元素的时候，面试官突然问我【display: none】和【visibility: hidden】的区别，我当时一愣，这俩有区别吗，好像有，但是忘记了啊，因为平常基本都是用【display: none】，几乎没用过【visibility: hidden】，我只好如实回答。面试结束后回到家的第一件事就是敲代码测试，下面就是测试过程及结果： 一、...
元素隐藏的几种方式
娓娓道来
08-06 334
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; bor...
常见隐藏元素的方法
weixin_43356259的博客
04-26 203
常见隐藏元素的方法 一般面试官经常会问这个问题,那么,常见的隐藏元素的方法有哪几种呢? 小源在这儿总结了几点: 1:设置opcity为0; 2:visiblity设置为hidden 3:display为none 4:设置宽或高为0 5:把元素推到很远的地方而使元素看不到 那么推荐使用哪种呢 一般情况下推荐使用visbility,为什么呢?因为使用 display:none会触发reflow和repaint,而visibility只会触发repaint 如果该元素有图层的情况下使用opcity设置为0,因为o
常用隐藏元素的几种方法
wind_z_i的博客
10-15 227
diaplay:none display属性是真正隐藏元素，将display属性设为none确保元素不可见，且被隐藏的元素不占据任何空间。不仅如此，任何这个元素的子孙元素也会被同时隐藏，而且一旦display设为none任何对该元素直接打用户交互操作都不可能生效。 此外元素在读屏软件中会被隐藏。 但是可以通过DOM节点访问到这个元素。 visibility:hidden 被隐藏的元素依然会占据空间，对我们的网页布局起作用。与opacity唯一不同的是它不会响应任何用户交互。 此外元素在读屏软件中
CSS隐藏页面元素的5种方法
09-24
与`opacity`不同，`hidden`状态的元素不响应用户交互，并且在屏幕阅读器中是隐藏的。`visibility`也可以实现动画效果，例如，通过改变其可见状态实现元素的延迟显示和隐藏。 第三，`display`属性设置为`none`是最...
谈谈CSS隐藏元素(display,visibility)的区别
09-25
在实际应用中，选择哪种隐藏方式取决于具体需求。如果需要节省空间并防止用户交互，`display:none`可能是更好的选择；如果希望保留元素的空间，并且不想影响页面布局，`visibility:hidden`则更合适。而`height:0`和`...
右侧自动隐藏和显示联系方式
09-19
在网页设计和开发中，"右侧自动隐藏和显示联系方式"是一种常见的交互设计手法，它能够提升用户体验，同时保持页面整洁。这种设计模式通常应用于企业网站、电商网站或个人博客等，让用户在需要时能快速找到联系信息，...
jquery判断元素是否隐藏的多种方法
10-25
本文将详细介绍几种不同的方法来检查一个DOM元素在页面上是否处于隐藏状态。 首先，我们可以使用CSS属性`display`来判断。通过获取元素的`display`样式属性，并与字符串`none`进行比较，可以确定元素是否被隐藏。...
jQuery控制元素隐藏和显示
12-03
以上就是jQuery中控制元素隐藏和显示、淡入淡出以及滑动效果的基本用法。这些功能使得动态效果的实现变得简单，大大提升了用户体验。在实际项目中，开发者可以根据需求灵活组合使用这些方法，创建出更丰富的交互效果...
元素显示与隐藏的几种方式
panliyou的博客
01-18 641
元素显示与隐藏的几种方式 1.display:none;（常用） 元素隐藏且在文档中部不占位置，不会影响其它结构 transition（过渡），没有过渡效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
要让一个元素全部隐藏掉且在文档流中不占位，应该使用下面哪个 CSS 规则？
m0_60489011的博客
09-28 2041
这个题的答案是display:none 隐藏一个元素的方法有两种：dispaly:none，visibility:hidden 而他们之间的区别之一就是隐藏一个元素且在文档流中占不占位： 1.dispaly:none 1）不为被隐藏的对象保留其物理空间。html对象在页面上彻底消失（display:none会让元素完全从渲染树中消失，渲染的时候不占据任何空间）。 2）是非继承属性，子孙节点消失由于元素从渲染树消失造成的，通过修改子孙节点，属性无法显示。 ...
HTML元素的隐藏四种方法
coderlhj666的博客
05-18 1万+
HTML元素的隐藏四种方法 一、方法一：display设置为none 元素不显示，也不占据任何位置，不占据任何空间（和不存在一样） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
隐藏元素的4种方法
weixin_40081575的博客
08-19 959
1.将元素设置为隐藏,标签在文档流中不占位置 display:none; 隐藏 display:bloack;显示 2.隐藏元素 但是文档流中位置还在, visibility:hidden;隐藏 visibility:visible;显示 3.设置标签的透明度,范围0~1 表示完全透明.1表示完全不透明 opacty:0.5 半透明; 4.通过rgba,可以设置透明度 background-co...
实现元素隐藏的方式有哪几种？
weixin_45650243的博客
12-03 1385
实现元素隐藏的方式有哪几种？ 1.opacity:0 设置透明度 2.visibility:hidden 将元素隐藏 3.display:none 将元素从网页移除 4.position:-2000px 将元素移出视图区
前端常见面试题：用css隐藏一个元素的五种方法
lucky_girl_girl的博客
02-23 264
1.opacity:0; 占位 2.visibility:hidden;占位 3.display:none;不占位 4.height:0;overflow:hidden; 不占位 5.position:absolute;left:-9999px;top:-9999px.;
html中占位隐藏,css样式占位和不占位隐藏元素的方法
weixin_31764905的博客
05-30 2029
css样式常用display: none;与visibility: hidden;方法设置元素隐藏，其中display:none方法隐藏元素不占位，visibility: hidden;方法隐藏元素占位。下面我们来看一下这两种方法如何使用。display属性介绍：display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间。该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失...
html标签隐藏占位,css如何隐藏元素不占位？
weixin_33781072的博客
05-31 867
用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 等方式隐藏元素。css使用display属性隐藏元素不会占位置。display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦 di...
隐藏元素的几种方法
热门推荐
Wennsai的博客
10-06 1万+
隐藏元素的几种方法 1、overflow:hidden; 防止溢出，也是一种隐藏，只不过是把超出范围的元素隐藏，这种一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用 2.display:none 设置元素的display为none是最常用的隐藏元素的方法。 .hide { display:none; } 这就是完全的隐藏了，直接消失，任何对该元素直接的用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。 3、opacity:0 opacity属性表示
html标签显示隐藏的方式
最新发布
05-31
可以使用CSS来控制HTML标签的显示和隐藏。以下是常用的三种方式： 1. display属性：display属性用来控制元素的显示和隐藏。通过设置display为none，可以隐藏元素，而设置为block、inline等值则可以显示元素。例如： ``` <p style="display: none;">这是一个隐藏的段落。</p> ``` 2. visibility属性：visibility属性也可以用来控制元素的显示和隐藏。但是，与display属性不同的是，当元素被隐藏时，它仍然占据着页面上的空间。例如： ``` <p style="visibility: hidden;">这是一个隐藏的段落。</p> ``` 3. opacity属性：opacity属性用来控制元素的透明度。通过设置opacity为0，可以让元素完全隐藏。例如： ``` <p style="opacity: 0;">这是一个隐藏的段落。</p> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值