Display and hiding in web development

Most programming languages, in the flat development process, will encounter some special scenes, need to implement display or hide to achieve the effect we want, but there are many ways to achieve, write today, hope can help you.

I studied the front-end for 1 years, deliberately write blog to review.

Mode 1:

CSS Way to implement

1: Set style:Visibility: hidden/visible; Hidden and displayed,

2: Set style: display:none/(inline/block) hidden and (inline element display/block level element display),

The difference between the two: ' Visibility hides the layout space, and display does not occupy the layout space.

Mode 2:

JS Way to operate, sometimes can be based on click events to achieve hidden and display

1:

document.getElementById ("id"). style.visibility= "visibe";d Ocument.getelementbyid ("id"). Style.visibility= "hidden";

2:

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

These two ways, is based on the CSS, with JS to achieve.

Mode 3:

The way jquery is implemented

$ (function() {     $("BTN"). Click (function() {           $ ("div"). Hide ();  /* Hide */    });   $ (function() {     $("BTN"). Click (function() {           $ ("div"). Show (); /* Show */     });   });

Premise: Because jquery is a tool that is encapsulated on the JS basis, you have to introduce jquery.js before use

Such as:

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

The jquery version can be selected according to your needs: Jquery.js

At present I have made these kinds of, other ways still in the study, follow up.

Display and hiding in web development