W JavaScript możemy ukryć elementy za pomocą styl.wyświetlacz lub za pomocą styl.widoczność . The widoczność Właściwość w JavaScript służy również do ukrywania elementu. Różnica między styl.wyświetlacz I styl.widoczność jest podczas używania widoczność: ukryta, znacznik nie jest widoczny, ale miejsce jest przydzielone. Za pomocą Nie wyświetla się, tag również nie jest widoczny, ale na stronie nie ma przydzielonego miejsca.

W HTML możemy użyć ukryty atrybut, aby ukryć określony element. Kiedy ukryty atrybut w HTML ustawia się na true, element jest ukryty lub gdy wartość jest FAŁSZ, element jest widoczny.

Składnia

Ogólna składnia służąca do ukrywania elementu styl.ukryty I styl.widoczność podaje się następująco.

Za pomocą styl.ukryty

 document.getElementById('element').style.display = 'none';  

Za pomocą styl.widoczność

 document.getElementById('element').style.visibility = 'none';  

Zobaczmy teraz kilka przykładów, które pomogą zrozumieć ukrywanie elementów JavaScript .

Przykład 1

W tym przykładzie zobaczymy, jak usunąć elementy za pomocą JavaScript styl.wyświetlacz nieruchomość. Tutaj jest div element i element akapitu, który ukrywa się po kliknięciu danego elementu Przycisk HTML . Musimy kliknąć 'Kliknij!' przycisk, aby zobaczyć efekt.

 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(&apos;div&apos;).style.visibility = &apos;hidden&apos;; document.getElementById(&apos;heading&apos;).style.display = &apos;none&apos;; }  

Wyjście

Na wyjściu widzimy, że div element (na który zastosowaliśmy styl.widoczność property) ukrywa się, ale nadal przydziela przestrzeń. Ale nagłówek (w którym zastosowaliśmy styl.wyświetlacz property) ukrywa się i nie przydziela żadnej przestrzeni.

Po kliknięciu przycisku efektem będzie -