I JavaScript kan vi dölja elementen med hjälp av stil.display eller genom att använda stil.synlighet . De synlighet egenskap i JavaScript används också för att dölja ett element. Skillnaden mellan stil.display och stil.synlighet är vid användning synlighet: dold, taggen är inte synlig, men utrymme tilldelas. Använder sig av display: ingen, taggen är inte heller synlig, men det finns inget utrymme tilldelat på sidan.
string.format java sträng
I HTML kan vi använda dold attribut för att dölja det angivna elementet. När dold attribut i HTML sätts till true, elementet är dolt eller när värdet är falsk, elementet är synligt.
Syntax
Den allmänna syntaxen för att dölja ett element med hjälp av stil.dold och stil.synlighet ges enligt följande.
Använder sig av stil.dold
document.getElementById('element').style.display = 'none';
Använder sig av stil.synlighet
document.getElementById('element').style.visibility = 'none';
Låt oss nu se några exempel för att förstå hur element gömmer sig javascript .
Exempel1
I det här exemplet kommer vi att se hur man tar bort element med hjälp av JavaScript stil.display fast egendom. Här finns en div element och ett styckeelement som döljs när du klickar på det givna HTML-knapp . Vi måste klicka på 'Klicka här!' knappen för att se effekten.
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'; } Testa det nu Produktion
I utgången kan vi se att div element (som vi har använt stil.synlighet egendom) gömmer sig men allokerar fortfarande utrymmet. Men rubriken (som vi har ansökt om stil.display egendom) gömmer sig och tilldelar inte något utrymme.
Efter att ha klickat på knappen blir resultatet -
