Show / Hide HTML-elementen met behulp van JavaScript
Als het gaat om het tonen of verbergen van een HTML-elementen, kunnen we uitvoeren van deze operatie in JavaScript op twee manieren:
- zichtbaarheid
- tonen
Om gebruik te maken zichtbaarheid en het weergeven van JavaScript wij zijn nodig om de "stijl gebruik" attribuut, deze methode vormt de toegang tot CSS-attributen in JavaScript.
style.visibility:
style.visibility zal verbergen het element, maar zal bezetten de ruimte toegewezen aan het HTML-element. Om gebruik te maken style.visibility we nodig hebben om een van twee waarden pass "zichtbaar" of "verborgen".
Voorbeeld:
Resultaat HTML Element met JavaScript:
'html element id' ) . style . visibility = "visible" ; document. getElementById ( 'html element id'). style. visibility = "visible";
Hiding HTML Element met JavaScript:
'html element id' ) . style . visibility = "hidden" ; document. getElementById ( 'html element id'). style. visibility = "hidden";
style.display:
style.display zal verbergen het element en zal niet bezetten de ruimte. Om gebruik te maken style.display we nodig hebben om een van deze waarden "inline" of "block" of "none" pass;
OPMERKING:
In sommige gevallen vindt u lege waarde (Voorbeeld: "") krijgt doorgegeven aan style.display in plaats van "inline" of "block" of "none". Bij het passeren blanco waarde wij vertellen de browser op de standaard waarde gebruiken om het element te verbergen. Het wordt aanbevolen niet te gebruiken tijdens het gebruik van blanco waarde style.display eigendom.
| Woning Naam | Beschrijving |
| inline | Toont de HTML-Element zonder enige onderbreking paragraaf |
| blok | Toont de HTML-Element met paragraaf break |
| geen | Zal verbergen de HTML Element |
Voorbeeld:
Resultaat HTML Element met Paragraaf Break:
'html element id' ) . style . display = "block" ; document. getElementById ( 'html element id'). style. display = "block";
Hiding HTML Element:
'html element id' ) . style . display = "none" ; document. getElementById ( 'html element id'). style. display = "none";
Resultaat HTML Element zonder Paragraaf Break:
'html element id' ) . style . display = "inline" ; document. getElementById ( 'html element id'). style. display = "inline";
Code Demo:
<html> <head> <script type="text/javascript"> functie hideElementByVisible (obj) (document.getElementById (obj). style.visibility = "hidden";) function showElementByVisible (obj) (document.getElementById (obj) . style.visibility = "visible";) function hideElementByDisplay (obj) (document.getElementById (obj). style.display = "none";) function showElementDisplay (obj) (document.getElementById (obj). style.display = " inline ";) function showElementByDisplay (obj, prop) (if (prop ==" block ") (document.getElementById (obj). style.display =" block ";) else if (prop ==" inline ") (document . getElementById (obj). style.display = "inline";)) </ script> </ head> <body> <input type = "text" name = "txtname" id = "txtname" value = "TextBox1" / > <input type="text" name="txtname1" id="txtname1" value="TextBox2" /> <br /> Zichtbaar: <br /> <input type = "button" value = "Verberg Element - TextBox1" onClick = "hideElementByVisible ( 'txtname');" /> <input type="button" value="Show Element-TextBox1" onClick="showElementByVisible('txtname');" /> <br /> <br /> Display : <br /> <input type="button" value="Hide Element-TextBox1" onClick="hideElementByDisplay('txtname');" /> <input type = "button" value = "Toon Element - TextBox1" onClick = "showElementDisplay ( 'txtname');" /> <br /> <br /> Paragraaf Toon <br /> <input type = "button" value = "Toon Element Met Paragraaf - TextBox2" onClick = "showElementByDisplay ( 'txtname' , 'block'); "/> </ body> </ html> 
