V JavaScriptu můžeme skrýt prvky pomocí styl.displej nebo pomocí styl.viditelnost . The viditelnost vlastnost v JavaScriptu se také používá ke skrytí prvku. Rozdíl mezi styl.displej a styl.viditelnost je při použití viditelnost: skrytý, tag není viditelný, ale je přiděleno místo. Použitím displej: žádný, značka také není viditelná, ale na stránce není přiděleno žádné místo.

V HTML můžeme použít skrytý atribut pro skrytí zadaného prvku. Když skrytý atribut v HTML nastaví na true, prvek je skrytý nebo když je hodnota nastavena Nepravdivé, prvek je viditelný.

Syntax

Obecná syntaxe pro skrytí prvku pomocí styl.skrytý a styl.viditelnost se podává následovně.

Použitím styl.skrytý

 document.getElementById('element').style.display = 'none'; 

Použitím styl.viditelnost

 document.getElementById('element').style.visibility = 'none'; 

Nyní se podívejme na několik příkladů, abychom pochopili skrývání prvků javascript .

java jinak pokud

Příklad1

V tomto příkladu uvidíme, jak odstranit prvky pomocí JavaScriptu styl.displej vlastnictví. Zde je a div prvek a prvek odstavce, který se po kliknutí na daný prvek skryje HTML tlačítko . Musíme kliknout na 'Klikni na mě!' tlačítko pro zobrazení efektu.

 style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById(&apos;div&apos;).style.visibility = &apos;hidden&apos;; document.getElementById(&apos;heading&apos;).style.display = &apos;none&apos;; } 

Výstup

Ve výstupu můžeme vidět, že div prvek (na který jsme aplikovali styl.viditelnost majetek) se skrývá, ale stále přiděluje prostor. Ale nadpis (na který jsme použili styl.displej majetek) se skrývá a nepřiděluje žádné místo.

Po kliknutí na tlačítko bude výsledek -