首页 > 代码库 > Web开发中的显示与隐藏

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="http://www.mamicode.com/../css/jquery-1.8.3.js" >

 

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

 

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

 

Web开发中的显示与隐藏