Web開發中的顯示與隱藏

標籤：css   過程   部落格   地址   一個   封裝   down   rip   targe   

大多數程式設計語言，在平開發過程中，都是會遇到一些特殊的情境，需要實現顯示或者隱藏來達到我們想要的效果；然而實現的方式有多種，今天就寫一下，希望可以幫到各位。

小編我學習前端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 

 

目前我就弄了這幾種，其他的方式還在學習中，後續補上。

 

Web開發中的顯示與隱藏