I JavaScript kan vi skjule elementerne ved hjælp af stil.display eller ved at bruge stil.synlighed . Det sigtbarhed egenskab i JavaScript bruges også til at skjule et element. Forskellen mellem stil.display og stil.synlighed er ved brug synlighed: skjult, tagget er ikke synligt, men der er afsat plads. Ved brug af display: ingen, tagget er heller ikke synligt, men der er ikke tildelt plads på siden.
I HTML kan vi bruge skjult attribut for at skjule det angivne element. Når skjult attribut i HTML sættes til sand, elementet er skjult, eller når værdien er falsk, elementet er synligt.
Syntaks
Den generelle syntaks til at skjule et element ved hjælp af stil.skjult og stil.synlighed er givet som følger.
Ved brug af stil.skjult
document.getElementById('element').style.display = 'none';
Ved brug af stil.synlighed
document.getElementById('element').style.visibility = 'none';
Lad os nu se nogle eksempler for at forstå, hvordan elementer gemmer sig i javascript .
Eksempel 1
I dette eksempel vil vi se, hvordan man fjerner elementer ved at bruge JavaScript stil.display ejendom. Her er der en div element og et afsnitselement, der skjules ved at klikke på det givne HTML-knap . Vi skal klikke på 'Klik på mig!' knappen for at 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 nu Produktion
I outputtet kan vi se, at div element (som vi har anvendt stil.synlighed ejendom) gemmer sig, men tildeler stadig pladsen. Men overskriften (som vi har søgt på stil.display ejendom) gemmer sig og tildeler ikke nogen plads.
Når du har klikket på knappen, vil resultatet være -
