В 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('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } Тествайте сега Изход
В резултата можем да видим, че див елемент (върху който сме приложили стил.видимост property) се крие, но все още разпределя пространството. Но заглавието (за което сме приложили стил.дисплей свойство) се крие и не разпределя място.
След натискане на бутона, резултатът ще бъде -
