zoukankan      html  css  js  c++  java
  • Web开发中的显示与隐藏

    大多数编程语言,在平开发过程中,都是会遇到一些特殊的场景,需要实现显示或者隐藏来达到我们想要的效果;然而实现的方式有多种,今天就写一下,希望可以帮到各位。

    小编我学习前端1年了,特意写写博客来回顾一下。

    方式1:

    CSS的方式实现

    1:设置样式:visibility: hidden/visible;隐藏和显示,

    2:设置样式:display:none/(inline/block)隐藏和(内联元素显示/块级元素显示),

    两者之间的区别:‘visibility 隐藏之后会占布局空间,而display则不会占布局空间。

    方式2:

    JS的方式来操作,有的时候可以根据点击事件来实现隐藏和显示

    1:

    document.getElementById("id").style.visibility="visibe";
    document.getElementById("id").style.visibility="hidden";

    2:

    document.getElementById("id").style.display="none";
    document.getElementById("id").style.display="inline";

    这两种方式,是以CSS的基础上,用JS来实现。

    方式3:

    JQuery的方式实现

    $(function(){
         $("btn").click(function(){
               $("div").hide();/*隐藏*/
        });   
    });
    
    
    $(function(){
         $("btn").click(function(){
               $("div").show();/*显示*/
        });   
    });

    前提:因为JQuery就是JS基础之上封装的一个工具,所以使用前得引入 jquery.js

    如:

    <script type="text/javascript" src="../css/jquery-1.8.3.js" >

    jquery版本 可根据自己的需求选择,  下载地址:jquery.js 

    目前我就弄了这几种,其他的方式还在学习中,后续补上。

  • 相关阅读:
    2019 SDN大作业
    个人作业——软件工程实践总结作业
    1.机器学习,从入门到放弃入门
    python25之进制转换
    python学习24之异常
    python学习23之标准库
    python学习22之函数式编程
    python学习21之高级特性
    python学习20之面向对象编程高级
    python学习19类5之多态与鸭子模型
  • 原文地址:https://www.cnblogs.com/zhangqie/p/6737217.html
Copyright © 2011-2022 走看看