Jak pokazać lub ukryć element na stronie za pomocą JavaScript

Podczas tworzenia stron internetowych użytkownicy muszą ukryć lub pokazać niektóre elementy. Te elementy mogą być przyciskiem, trochę animacji lub paskiem nawigacyjnym itp. Przez większość czasu użytkownik chce, aby przycisk lub pasek nawigacyjny był widoczny dla punktu widzenia komputerów stacjonarnych, ale nie dla mobilnego punktu widzenia.

Dzięki JavaScript użytkownicy mogą łatwo ukryć lub pokazać element na stronie internetowej, w zależności od zachowania użytkownika. W tym artykule zobaczymy, w jaki sposób JavaScript jest używany do tego celu.

Ukrywanie i wyświetlanie elementów w JavaScript

Za pomocą JavaScript możemy ukryć lub pokazać element na stronie internetowej:

• styl.wyświetlacz
• styl.widoczność

Zrozumiemy każdy z nich osobno z przykładami, a następnie porównajmy, jak różnią się od siebie:

Jak używać stylu.Wyświetl w JavaScript: Właściwość wyświetlacza reprezentuje element, który powinien być wyświetlany na Twojej stronie… Korzystanie z tego użytkownika może ukryć cały element, a strona jest zbudowana, ponieważ poprzedni element wcale nie był tam.

Składnia:

Tutaj, w przecinkach, należy zdefiniować wartość, czy wyświetlić treść, czy nie. Oto przykład:

Ukryj element: styl.Display = „Brak”:

Kliknij przycisk „Ukryj mnie”, aby ukryć element DIV:

Gdy użytkownik kliknie przycisk, funkcja jest wywoływana, aby ukryć element. Odbywa się to poprzez przypisanie żadnej wartości do stylu.wyświetlacz.

Teraz spójrz na wyjście, jak przycisk zajmował przestrzeń obrazu. Tak działa wyświetlacz, całkowicie ukrywa element i odbudowuje stronę tak, jakby element nie był w pierwszej kolejności.

Aby pokazać element: styl.display = „” lub „blok”:

Kliknij przycisk „Pokaż mi”, aby pokazać element DIV Element:

Teraz podobnie, aby pokazać element, który przycisk przesunął i zapewnił miejsce do elementu, gdy wyświetlacz został zmieniony z stylu.display = „Brak” do stylu.display = „”.

Na te sposoby element będzie wyświetlany lub całkowicie ukryty, a nie tylko jego widoczność. Strona zostanie odbudowana zgodnie z tymi zachowaniami.

Jak używać stylu.Widoczność w JavaScript: Widoczność stylu działa w podobny sposób, ale różnica polega na tym, że tylko widoczność elementu jest ukryta przed czytnikiem ekranu. Oznacza to, że element nie jest usuwany z przepływu strony, a tym samym pozostawiając miejsce na stronie.

Składnia:

Tutaj, w przecinkach, wartość „ukrytego” lub „” nie należy zdefiniować żadnej wartości, czy wyświetlić treść, czy nie. Aby lepiej to zrozumieć, oto przykład:

To jest akapit.

To kolejny akapit.

Teraz, tutaj, gdy przycisk został kliknięty ATO, ukrył widoczność, ukrył go tylko dla oka widza.

W tym elemencie przestrzeń na stronie internetowej nie była zajęta. To pokazuje, jak styl.Wyświetlacz i styl.widoczność różnić się.

Wniosek

Każdy chce ukryć lub pokazać szczególne elementy na swojej stronie internetowej. W tym, jak prowadzić, nauczyliśmy się sposobów zmiany widoczności elementów na stronie internetowej za pomocą JavaScript. Istnieją dwa konkretne sposoby, ale różnią się od siebie. Za pomocą styl.wyświetlacz Treść zostaje ukryta, a jej przestrzeń zajmuje druga treść. Podczas gdy użycie styl.widoczność, Treść jest tylko ukryta dla czytelnika, ale wciąż jest tam, ponieważ jego przestrzeń nie może być zajęta przez inne elementy. Jest to niezwykle przydatne dla programistów stron internetowych, ponieważ programiści chcą ukryć niektórych treści, a niektóre wyświetlane zgodnie z punktem widzenia.