Display and hiding in web development

Source: Internet
Author: User

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


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


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.