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('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } Otestujte to hned 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 -
