如何让html的某个元素隐藏，我们一般有三种方式：display:none, opacity:0, visibility:hidden。但这三种方式有何区别？

1. display:none

该方式让元素隐藏时，隐藏的元素不占空间，隐藏后将改变html原有样式。一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

2. visibility:hidden

该方式让元素隐藏时，隐藏的元素还是占用原有位置，隐藏后不将改变html原有样式。但，如果该元素的子元素使用了visibility:visible的话，改子元素将不被隐藏。

3. opacity:0

该方式让元素隐藏时，隐藏的元素还是占用原有位置，隐藏后不将改变html原有样式。但，隐藏的元素所对应的事件，仍然可以触发。display属性不会出现过渡 即使添加了transition,opacity属性适合有过渡的元素使用.

原文地址：https://www.cnblogs.com/zhaosijia----1234/p/8666635.html

时间： 2024-08-29 14:45:54

如何让html的某个元素隐藏，我们一般有三种方式：display:none, opacity:0, visibility:hidden。但这三种方式有何区别？的相关文章

父元素div清除浮动的三种方式

第一种做法: 父元素也设置:浮动 <style> div.b{ float:left; } div.c{ float:left; width:250px; height:100px; } div.d{ float:right; width:250px; height:100px; } </style> <div class="b"> <div class="c"></div> <div class=&

使用三种方式定位html中的元素

1)使用三种方式定位html中的元素a)通过ID$("#ID")b)通过标签名$("标签名")c)通过样式名$(".样式名")2)dom中,需要判段查找到的元素是否为null,而jquery中,无需判段,因为jquery本身内置判段器,在查找不到的情况下,返回"undefined" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&quo

0166 DOM 之 节点操作： 删除节点，删除留言案例，复制（克隆）节点，动态生成表格案例，创建元素的三种方式，innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指 父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va

设置元素不可见的三种方式

1.display:none 一些特殊元素的默认 display 值是它,例如 script . display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素. 它和 visibility 属性不一样.把 display 设置成 none 元素不会占据它本来应该显示的空间,但是设置成 visibility: hidden; 还会占据空间. 2.visibility:hidden 元素隐身,但是依旧占据空间 3.hidden=true HTML种任何元素都有属性h

Java 数组元素倒序的三种方式

将数组元素反转有多种实现方式,这里介绍常见的三种. 直接数组元素对换 @Test public void testReverseSelf() throws Exception { System.out.println("use ReverseSelf"); String[] strings = { "ramer", "jelly", "bean", "cake" }; System.out.println(

iOS 滑动隐藏导航栏-三种方式

/** 1隐藏导航栏-简单- */    self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 *///- (void)scrollViewDidScroll:(UIScrollView *)scrollView {//    //scrollView已经有拖拽手势,直接拿到scrollView的拖拽手势//    UIPanGestureRecognizer *pan = scrollVie

设置元素竖向居中的三种方式

/*No.1*/ li{ line-height: ;//设为页面高度 vertical-align: middle; } li,img{ vertical-align: middle; } /*No.2*/ li{ display: table-cell; vertical-align: middle; } /*No.3*/ li{ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }

ava对数组元素排序的三种方式

JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法.快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现.冒泡法是运用遍历数组进行比较,通过不断的比较将最小值或者最大值一个一个的遍历出来.选择排序法是将数组的第一个数据作为最大或者最小的值,然后通过比较循环,输出有序的数组. package com.study.test; import java.util.Arrays; public class TestArrSort {   

js/jquery设置元素隐藏和显示

//js 元素隐藏 document.getElementById('li11').style.display = 'none'; //js 元素显示 document.getElementById('li11').style.display = 'block'; //jquery元素隐藏 $('#li11').hide(); //jquery元素显示 $('#li11').show(); //还有一种方法,在css中设置 .hide{ display: none; } 然后通过js $('#l