У JavaScript ми можемо приховати елементи за допомогою style.display або за допомогою стиль.видимість . The видимість властивість у JavaScript також використовується, щоб приховати елемент. Різниця між style.display і стиль.видимість є при використанні видимість: прихована, тег не видно, але місце виділено. Використання дисплей: немає, тег також не видно, але на сторінці не виділено місця.
У HTML ми можемо використовувати прихований атрибут, щоб приховати вказаний елемент. Коли прихований атрибуту HTML встановлено значення true, елемент приховано або коли значення є помилковий, елемент видно.
Синтаксис
Загальний синтаксис, за допомогою якого можна приховати елемент стиль.прихований і стиль.видимість наводиться наступним чином.
Використання стиль.прихований
document.getElementById('element').style.display = 'none';
Використання стиль.видимість
document.getElementById('element').style.visibility = 'none';
Тепер давайте розглянемо кілька прикладів, щоб зрозуміти приховування елементів у javascript .
Приклад1
У цьому прикладі ми побачимо, як видалити елементи за допомогою JavaScript style.display власність. Тут є a див елемент і елемент абзацу, який приховується після клацання кнопка 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'; } Перевірте зараз Вихід
У вихідних даних ми бачимо, що див елемент (на який ми застосували стиль.видимість властивість) ховається, але все ще виділяє простір. Але заголовок (до якого ми застосували style.display властивість) ховається та не виділяє місця.
Після натискання кнопки результат буде -
