I JavaScript kan vi skjule elementene ved å bruke stil.visning eller ved å bruke stil.synlighet . De synlighet egenskap i JavaScript brukes også til å skjule et element. Forskjellen mellom stil.visning og stil.synlighet er ved bruk synlighet: skjult, taggen er ikke synlig, men plass er tildelt. Ved hjelp av display: ingen, taggen er heller ikke synlig, men det er ikke tildelt plass på siden.
I HTML kan vi bruke skjult attributt for å skjule det angitte elementet. Når skjult attributtet i HTML settes til true, elementet er skjult, eller når verdien er falsk, elementet er synlig.
Syntaks
Den generelle syntaksen for å skjule et element ved hjelp av stil.skjult og stil.synlighet er gitt som følger.
Ved hjelp av stil.skjult
document.getElementById('element').style.display = 'none';
Ved hjelp av stil.synlighet
document.getElementById('element').style.visibility = 'none';
La oss nå se noen eksempler for å forstå hvordan elementer skjules javascript .
Eksempel 1
I dette eksemplet vil vi se hvordan du fjerner elementer ved å bruke JavaScript stil.visning eiendom. Her er det en div element og et avsnittselement som skjules når du klikker på det gitte HTML-knapp . Vi må klikke på 'Klikk på meg!' knappen for å 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'; } Test det nå Produksjon
I utgangen kan vi se at div element (som vi har brukt på stil.synlighet eiendom) gjemmer seg, men tildeler fortsatt plassen. Men overskriften (som vi har søkt på stil.visning eiendom) gjemmer seg og tildeler ikke noe plass.
Etter å ha klikket på knappen, vil resultatet være -
