日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

css隱藏??元素的幾種方式

作者：賣菜的小白 更新時間： 2022-04-19 編程語言

一、寫在前面
css存在哪些方式可以隱藏頁面的元素的方法，下面將對其進行總結。
二、總結方法
2.1、opacity:0

  <style>
    .first {
      visibility: hidden;
    }

    .last {}
  style>
<body>

  <div>
    <h1 class="first">我是第一行h1>
    <h1 class="last">我是第二行h1>
  div>

  <script>
    let first = document.querySelector('.first')
    let last = document.querySelector('.last')

    first.addEventListener('click', () => {
      console.log('first')
    })

    last.addEventListener('click', () => {
      console.log('last')
    })
  script>

body>

opacity: 0:將元素的透明度設置為0，就看起來隱藏了，但是任然可以占據空間且可以交互。
2.2、visibility: hidden

DOCTYPE html>
<html lang="cn">

<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>Documenttitle>
  <style>
    .first {
      visibility: hidden;
    }

    .last {}
  style>
head>

<body>

  <div>
    <h1 class="first">我是第一行h1>
    <h1 class="last">我是第二行h1>
  div>

  <script>
    let first = document.querySelector('.first')
    let last = document.querySelector('.last')

    first.addEventListener('click', () => {
      console.log('first')
    })

    last.addEventListener('click', () => {
      console.log('last')
    })
  script>

body>

html>

visibility:hidden和opacity:0一樣仍然占據空間，但是看不多，并且無法進行交互。
2.3、overflow:hidden

DOCTYPE html>
<html lang="cn">

<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>Documenttitle>
  <style>
    .main {}

    .main .box {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      overflow: hidden;
    }
  style>
head>

<body>

  <div class="main">
    <div class="box">
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
    div>
    <h1>大家好h1>
  div>

body>

html>

overflow：hidden，只隱藏溢出部分，并且不占據空間，也無法交互。
2.4、display:none
這個比較熟悉，從文檔流中去除，不占據空間同時也無法交互。
2.5、z-index: -999

DOCTYPE html>
<html lang="cn">

<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>Documenttitle>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      z-index: -999;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }
  style>
head>

<body>

  <div class="box1">div>
  <div class="box2">div>

body>

html>

z-index:-999理是將層級放到底部，這樣就被覆蓋了，看起來隱藏了
2.6、transform: scale(0,0)

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

<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>Document</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      transform: scale(0, 0);
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>

  <div class="box1"></div>
  <div class="box2"></div>


  <script>
    let box1 = document.querySelector('.box1')
    let box2 = document.querySelector('.box2')
    box1.addEventListener('click', () => {
      console.log('box1')
    })
    box2.addEventListener('click', () => {
      console.log('box2')
    })
  </script>
</body>

</html>

transform: scale(0,0) :進行平面縮放，將大小縮小為0，但是任然占據空間，無法交互。

原文鏈接：https://blog.csdn.net/weixin_47450807/article/details/124226507

欄目分類
最近更新