In JavaScript kunnen we de elementen verbergen met behulp van de stijl.weergave of door gebruik te maken van de stijl.zichtbaarheid . De zichtbaarheid eigenschap in JavaScript wordt ook gebruikt om een element te verbergen. Het verschil tussen de stijl.weergave En stijl.zichtbaarheid is bij gebruik zichtbaarheid: verborgen, de tag is niet zichtbaar, maar er is ruimte toegewezen. Gebruik makend van Geen weergeven, de tag is ook niet zichtbaar, maar er is geen ruimte toegewezen op de pagina.
int in tekenreeks
In HTML kunnen we de verborgen attribuut om het opgegeven element te verbergen. Wanneer de verborgen attribuut in HTML wordt ingesteld op true, het element is verborgen, of wanneer de waarde dat is vals, het element is zichtbaar.
Syntaxis
De algemene syntaxis waarmee een element wordt verborgen stijl.verborgen En stijl.zichtbaarheid wordt als volgt gegeven.
Gebruik makend van stijl.verborgen
document.getElementById('element').style.display = 'none';
Gebruik makend van stijl.zichtbaarheid
document.getElementById('element').style.visibility = 'none';
Laten we nu enkele voorbeelden bekijken om het verbergen van elementen in te begrijpen javascript .
Voorbeeld 1
In dit voorbeeld zullen we zien hoe we elementen kunnen verwijderen met behulp van JavaScript stijl.weergave eigendom. Hier is er een div element en een paragraafelement dat wordt verborgen als u op het gegeven klikt HTML-knop . We moeten op klikken 'Klik hier!' knop om het effect te zien.
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 het nu Uitvoer
In de uitvoer kunnen we zien dat de div element (waarop we hebben toegepast stijl.zichtbaarheid eigendom) verbergt zich maar wijst nog steeds de ruimte toe. Maar de kop (waarop we hebben toegepast stijl.weergave eigendom) verbergt zich en wijst geen ruimte toe.
Nadat u op de knop hebt geklikt, is het resultaat:
