zoukankan      html  css  js  c++  java
  • 隐藏元素的几种方法

    一般来说有四种,visibility:hidden、display:none、opacity:0、position:absolute&top,left 负的极大值(元素移出视线范围)

    他们的区别主要分为:元素在文档中的位置,是否可以继承&反继承,是否可交互,是否可以添加transition属性。

    1.display:none

    浏览器不会渲染display为none的元素,在文档中没有位置,改变该属性会发生重绘;

    并不会被子类继承,但是子类不会显示…因为一起被隐藏了;

    不可交互,transition属性无效。

    2.visibility:hidden

    在文档中依然占据位置,只是不可见;

    会被子类继承,子类也可以通过visibility:visible来反隐藏,改变该属性会发生重绘;

    不会触发该元素已绑定事件;

    transition无效

    3.opacity=0

    只是元素透明度为100%,文档中依然占据位置,

    会被子类继承,但子类不能通过opacity=1来反隐藏,

    依然能触发该元素已绑定事件

    tansition有效

    4.position:absolute + top:-9999px + left:-9999px

    元素移出可视区域,不影响布局

    子类跟随一起移出视区……

    依然可以绑定事件,把hide移回视区

    可以添加transition属性

  • 相关阅读:
    linux创建用户与删除用户及问题解决(ubuntu)
    Build tool
    Version Control&Git
    IntelliJ IDEA激活
    KDJ 指标
    MACD 分析理解
    MACD 指标
    BOLL 指标
    IaaS,PaaS,SaaS 的区别
    Kubernetes 第十七章 调度器 污点和容忍 以及高级调度方式
  • 原文地址:https://www.cnblogs.com/ariel-zhang/p/7381986.html
Copyright © 2011-2022 走看看