Web开发中的显示与隐藏

Posted 2020-09-27 切切歆语

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

小编我学习前端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 

 

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