Home > Article > Web Front-end > html learning
html learning
- WBOYOriginal
- 2016-06-24 11:46:491139browse
Element hiding
In HTML we often need to hide certain elements. Sometimes we need to temporarily hide the page and let other elements display to complete the operation. Sometimes we need to pass some information to js, but we don’t want to show it to users, so we will hide it.
display/visibility method
There are two methods in html that can hide elements.
First upload a piece of html code, and then proceed.
<!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 very simple, it is a label input submit button with these four elements in total.
<style> #firstname{ display: none; }</style> This is the code to hide the element with the id of firstname.
Isn’t it very simple. There is another way:
<style> #firstname{ visibility: hidden; /*visibility: visible; 这个是显示的代码*/ } </style> This is also hidden.
The difference between the two methods
The first display method is to hide it more thoroughly. In other words, the hidden elements do not take up space on the page. The typeset elements will be moved sequentially to use up all the space occupied by the previous elements.
The second one is just invisible. But the position it occupies on the page is still its own and will not be used by other elements.
Both methods can be selected by the JQuery selector
jquery’s hide() and show()
This is relatively simple.
Look at the code below
$('#firstname').hide(); This will hide this element.
Similarly:
$('#firstname').show(); This displays the element.
What’s interesting is that both functions have parameters.
Here is how to use it:
$('#firstname').hide('slow/400/fast', function() { //do something after hide }); The first parameter is to select the hiding time slow / 400 / fast, and the second parameter is a callback function to inform the browser that after hiding the element, What's the next move to continue.
Example:
$('#firstname').hide('400', function() { alert("I have been hidden");}); That’s OK.
Hide the input element
In fact, the above methods can hide the Input element, but there is a simpler method for input.
The following code:
<input type="hide" value="val" id="inputid" />
This is enough! !
Isn’t it very simple, so when you only need very simple information, you can just hide it and use this.