Javascript - Zobrazit / skrýt HTML elementy pomocí JavaScriptu

Hlavní stránka > Javascript > Zobrazit / Skrýt HTML elementy pomocí JavaScriptu

Zobrazit / skrýt HTML elementy pomocí JavaScriptu

Leave a comment Go to comments 12.01.2009 Hitesh Agrawal zanechat komentář Přejít na komentáře

Když přijde na Ukázání nebo skrytí jakékoliv HTML elementy, můžeme provést tuto operaci v JavaScriptu dvěma způsoby:

viditelnost
zobrazení

Chcete-li použít viditelnosti a zobrazení v JavaScriptu jsme povinni používat "style" atributu, tato metoda představuje přístup CSS atributy v JavaScriptu.

style.visibility:
style.visibility bude skrývat prvek, ale bude zabírat prostor přidělené element HTML. Chcete-li použít style.visibility musíme projít buď ze dvou hodnot "viditelné" nebo "skrytý".

Příklad:
Zobrazení HTML Element pomocí JavaScriptu:

  'html element id' ) . style . visibility = "visible" ; dokument. getElementById ('html element id'). stylu. viditelnost = "viditelné";

Skrytí HTML Element pomocí JavaScriptu:

  'html element id' ) . style . visibility = "hidden" ; dokument. getElementById ('html element id'). stylu. viditelnost = "skrytý";

style.display:
style.display bude skrývat element a nebude zabírat místo. Chcete-li použít style.display musíme projít některé z těchto hodnot, "inline" nebo "blok" nebo "none";

POZNÁMKA:
V některých případech najdete prázdnou hodnotu (příklad: ""), jak se přešlo na style.display místo "inline" nebo "blok" nebo "none". Tím, že podstoupí prázdnou hodnotu říkáme prohlížeči použít výchozí hodnotu skrýt element. Je doporučeno nepoužívat prázdné hodnoty za použití style.display majetku.

Nemovitosti: Jméno	Popis
inline	Ukáže HTML prvek bez zalomení odstavce
blok	Ukáže HTML Element s odstavcem break
žádný	Bude skrývat HTML Element

Příklad:
Zobrazení HTML Element § Break:

  'html element id' ) . style . display = "block" ; dokument. getElementById ('html element id'). stylu. DISPLAY = "block";

Skrytí HTML Element:

  'html element id' ) . style . display = "none" ; dokument. getElementById ('html element id'). stylu. DISPLAY = "none";

Zobrazení HTML prvkem, bez zalomení odstavce:

  'html element id' ) . style . display = "inline" ; dokument. getElementById ('html element id'). stylu. DISPLAY = "inline";

Kód Demo:

 <html> <head> <script type="text/javascript"> funkce hideElementByVisible (obj) (document.getElementById (obj). style.visibility = "skrytý";) funkce showElementByVisible (obj) (document.getElementById (obj) . style.visibility = "viditelné";) funkce hideElementByDisplay (obj) (document.getElementById (obj). style.display = "none";) funkce showElementDisplay (obj) (document.getElementById (obj). style.display = " inline ";) funkce showElementByDisplay (obj, vrtule) (if (vrtule ==" block ") (document.getElementById (obj). style.display =" block ";) else if (vrtule ==" 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 /> Visible: <br /> <input type = "tlačítko" value = "Skrýt 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');" /> typ vstupního <= "tlačítko" value = "Zobrazit Element - TextBox1" onClick = "showElementDisplay ('txtname');" /> <br /> <br /> Bod Zobrazit <br /> <input type = "tlačítko" value = "Zobrazit Element s § - TextBox2" onClick = "showElementByDisplay ('txtname' , 'block'); "/> </ body> </ html>