前端基础(十四)_隐藏元素的方法

简介: 本文介绍了几种在前端开发中隐藏元素的方法,包括使用`display:none`、`visibility:hidden`、`opacity:0`等CSS属性,并提供了相应的示例代码。此外,还提到了其他隐藏元素的技巧,如通过设置元素位置、使用`overflow`属性和`filter`属性以及`rgba`颜色值来实现元素的隐藏。

隐藏元素的方法

1、display

通过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="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .box1 {
    
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
    
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox">
      我是smallBox盒子
    </div>
  </div>
</body>

</html>

在这里插入图片描述
使用:

  <style>
    .box1 {
    
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
    
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
      display: none;
    }
  </style>

在这里插入图片描述
当我们把display设置为block的时候可以再次显示:
在这里插入图片描述

2、visibility

通过visibility:hidden来控制元素隐藏
不使用:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .box1 {
    
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox111 {
    
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
    }

    .smallBox222 {
    
      border: 1px solid red;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox111">
      我是smallBox盒子111
    </div>
    <div class="smallBox222">
      我是smallBox盒子222
    </div>

  </div>
</body>

</html>

在这里插入图片描述
使用:

  <style>
    .box1 {
    
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox111 {
    
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
      visibility: hidden;
    }

    .smallBox222 {
    
      border: 1px solid red;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: pink;
    }
  </style>

在这里插入图片描述
能够发现这个元素已经不存在了在市占用的文档流位置还是存在的。
当我们把visibility设置为visible的时候可以再次显示:
在这里插入图片描述

3、opacity

透明度 0 完全透明 实现元素的不可见

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
  <style>
    .box1 {
    
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox111 {
    
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
      opacity: 0;
    }

    .smallBox222 {
    
      border: 1px solid red;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox111">
      我是smallBox盒子111
    </div>
    <div class="smallBox222">
      我是smallBox盒子222
    </div>

  </div>
</body>

</html>

在这里插入图片描述
也是依然占位当我们设置为1的时候可以显示
在这里插入图片描述

4、其他

4.1、设置元素位置,让其消失
position:absolute top:0 left:-100
4.2、overflow属性实现,将要隐藏元素移出父元素的范围
4.3、filter属性-- filter:Alpha(opacity=x)
兼容性:仅支持IE6、7、8、9,在IE10及以上版本中被移除
取值范围 0(完全透明)<x<100(完全不透明)
4.4、rgba(r,g,b,a)—用于颜色的不透明度设置
兼容性:IE6\7\8\不支持,IE9及更早版本的浏览器都支持
Red green blue 0-255
Alpha 0-1

目录
相关文章
|
9天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
41 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
2月前
|
前端开发 JavaScript
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
本文介绍了JavaScript中this的基本使用、this指向的判断以及改变this指向的方法。
40 1
前端基础(九)_this基本使用、this指向判断、改变this指向的方法
|
28天前
|
前端开发 JavaScript
掌握微前端架构:构建现代Web应用的新方法
本文介绍了微前端架构的概念及其在现代Web应用开发中的优势与实施方法。微前端架构通过将应用拆分成独立模块,提升了开发效率和灵活性。其核心优势包括技术栈灵活性、独立部署、团队协作及易于维护。文章详细阐述了定义边界、选择框架、管理状态和通信等关键步骤,并讨论了状态同步、样式隔离及安全性等挑战。微前端架构有望成为未来Web开发的重要趋势。
|
16天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
87 0
|
16天前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
67 0
|
2月前
|
前端开发 JavaScript
前端基础(七)_DOM元素获取(getElementById、getElementsByTagName、getElementsByClassName、querySelector等)
本文介绍了如何在前端通过不同的方法获取DOM元素,包括getElementById、getElementsByTagName、getElementsByClassName、querySelector和querySelectorAll。
84 3
|
2月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
65 3
|
20天前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
21 0
|
2月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
63 0