Home > Developer > Web Develop
In HTML we often need to hide some elements, sometimes we need to temporarily hide the page, let other elements display, to complete the operation. Sometimes some information we need to pass to JS, but do not want to give users to see, so it will be hidden.
Display/visibility methodThere are two methods in HTML that can hide elements.
First, the HTML code, and then the operation.
<! DOCTYPE html> <head> <title>Aliens</title> <script src="./js/jquery-2.1.1.js"></script> </head> <body> <form> <label for ="FirstName" id="FirstName">First Name:</label> <input type="text" id="Firstinput" name=" FirstName "></input><br/> </form> <button id="Submit" value="submit-btn">Submit</button> </body></html>The above code is simple, which is a label input submit button total of four elements.
<style> #firstname{ display: none; }</style>
This is the code that lets the element with ID firstname be hidden.
is not very simple. There is one more way:
<style> #firstname{ visibility: hidden; /*visibility: visible; 这个是显示的代码*/ }</style>
This also hides.
The difference between the two methodsThe first display method is to hide it a bit more thoroughly. This means that the hidden elements do not occupy space on the page. The elements of the layout are moved in turn to use all the space occupied by the previous element.
The second kind is just not visible. But the position on the page is still its own and will not be used by other elements.
Both of these methods can be selected by the jquery selector
The Hide () and show () of jqueryThis is quite simple.
Look at the code below
$(‘#firstname‘).hide();
This is to hide the element.
Similarly:
$(‘#firstname‘).show();
This will show the elements.
Interestingly, both of these functions have parameters.
Here's how to use it:
$(‘#firstname‘).hide(‘slow/400/fast‘function() { //do something after hide });
The first parameter is to select the hidden time slow / 400 / fast , and the second parameter is a callback function that tells the browser what the next action is to continue after the element is hidden.
Example:
$(‘#firstname‘).hide(‘400‘function() { alert("I have been hidden");});
This will be OK.
INPUT element hiddenIn fact, the method above can hide the input element, but input has an easier way.
The following code:
type="hide"value="val" id="inputid" />
That's enough!!
is not particularly simple, so when you just need a very simple information, hide it to use this.
HTML Learning-element hide/show and input hide
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
