В JavaScript можем да скрием елементите с помощта на стил.дисплей или чрез използване на стил.видимост . The видимост свойството в JavaScript също се използва за скриване на елемент. Разликата между стил.дисплей и стил.видимост е при използване видимост: скрита, етикетът не се вижда, но е разпределено място. Използвайки дисплей: няма, тагът също не се вижда, но няма отделено място на страницата.

В HTML можем да използваме скрит атрибут за скриване на посочения елемент. Когато скрит атрибут в HTML се задава на true, елементът е скрит или когато стойността е невярно, елементът се вижда.

Синтаксис

Общият синтаксис за скриване на елемент с помощта стил.скрит и стил.видимост се дава, както следва.

Използвайки стил.скрит

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

Използвайки стил.видимост

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

Сега нека видим някои примери, за да разберем скриването на елементи в javascript .

Пример1

В този пример ще видим как да премахваме елементи с помощта на JavaScript стил.дисплей Имот. Тук има а див елемент и елемент на параграф, който се скрива при щракване върху дадения HTML бутон . Трябва да щракнем върху 'Щракни ме!' бутон, за да видите ефекта.

 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;; } 

Изход

В резултата можем да видим, че див елемент (върху който сме приложили стил.видимост property) се крие, но все още разпределя пространството. Но заглавието (за което сме приложили стил.дисплей свойство) се крие и не разпределя място.

След натискане на бутона, резултатът ще бъде -