Toon / verberg de HTML-elementen met behulp van JavaScript

Home > Javascript > Toon / verberg de HTML-elementen met behulp van JavaScript

Toon / verberg de HTML-elementen met behulp van JavaScript

Leave a comment Go to comments 12/01/2009 Hitesh Agrawal Plaats een reactie Ga naar reacties

Als het aankomt op het weergeven of verbergen van alle HTML-elementen, kunnen wij deze bewerking uit te voeren in JavaScript op twee manieren:

zichtbaarheid
tonen

Voor het gebruik van de zichtbaarheid en het weergeven van JavaScript zijn wij verplicht om de "stijl" attribuut gebruikt, deze methode vormt de toegang tot CSS-attributen in JavaScript.

style.visibility:
style.visibility zal het element te verbergen, maar zal de ruimte voor het HTML-element te bezetten. Om gebruik te maken style.visibility moeten we een van de twee waarden pass "zichtbaar" of "verborgen".

Voorbeeld:
Resultaat HTML-element met behulp van JavaScript:

  'html element id' ) . style . visibility = "visible" ; document. getElementById ('html element id "). stijl. zichtbaarheid =" zichtbaar ";

Element Hiding HTML met behulp van JavaScript:

  'html element id' ) . style . visibility = "hidden" ; document. getElementById ('html element id "). stijl. zichtbaarheid =" verborgen ";

style.display:
style.display zal het element te verbergen en zal niet bezetten de ruimte. Om gebruik te maken style.display we nodig hebben om een pass van deze waarden "inline" of "block" of "none";

OPMERKING:
In sommige gevallen zul je lege waarde (voorbeeld: "") krijgt doorgegeven aan style.display in plaats van "inline" of "block" of "none". Bij het passeren van lege waarde die we vertellen dat de browser standaard waarde te gebruiken om het element te verbergen. Het is aangeraden om niet naar een lege waarde te gebruiken tijdens het gebruik van style.display eigendom.

Naam van het pand	Beschrijving
inline	Zal toon de HTML-element zonder onderbreking paragraaf
blok	Zal toon de HTML-element met een paragraaf te breken
geen	Zal het HTML-element te verbergen

Voorbeeld:
Resultaat HTML-element met Paragraaf Break:

  'html element id' ) . style . display = "block" ; document. getElementById ('html element id "). stijl. display =" block ";

Hiding HTML-element:

  'html element id' ) . style . display = "none" ; document. getElementById ('html element id "). stijl. display =" none ";

Resultaat HTML-element zonder Paragraaf Break:

  'html element id' ) . style . display = "inline" ; document. getElementById ('html element id "). stijl. display =" inline ";

Demo Code:

 <html> <head> <script type="text/javascript"> functie hideElementByVisible (obj) (document.getElementById (obj). style.visibility = "verborgen";) function showElementByVisible (obj) (document.getElementById (obj) . style.visibility = "zichtbaar";) 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 = "showelement - TextBox1" onClick = "showElementDisplay ('txtname');" /> <br /> <br /> Paragraaf Toon <br /> <input type = "button" value = "Toon element met Paragraaf - TextBox2" onClick = "showElementByDisplay ('txtname' , 'blok'); "/> </ body> </ html>