Как показать и скрыть текст в Javascript?
2 ответа
@guillermo Используйте toggle() класс чтобы показать и скрыть текст в Javascript:
Сделайте класс hidden например и display:none; и добавлять или убирать класс через toggle() метод в Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <style> p.hidden{ display: none; } </style> </head> <body> <div> <p>Текст</p> <button id="button">Показать/скрыть текст</button> </div> </body> <script> let pElement = document.querySelector("p"); document.querySelector('#button').addEventListener('click', () => { pElement.classList.toggle("hidden"); }) </script> </html> |
@guillermo
Для того, чтобы показать и скрыть текст в JavaScript, можно использовать методы стиля CSS - display и visibility.
- Скрыть текст:
Используя display: none; , вы можете скрыть текст.
document.getElementById("myText").style.display = "none";
где 'myText' - это id элемента текста, который нужно скрыть.
- Показать текст:
Используя display: block; , вы можете показать текст снова.
document.getElementById("myText").style.display = "block";
где 'myText' - это id элемента текста, который нужно показать.
- Скрыть и показать текст с анимацией:
Добавляя transition, чтобы текст скрылся или появился плавно:
document.getElementById("myText").style.transition = "opacity 2s"; document.getElementById("myText").style.opacity = "0";
Где 2 с - это время, за которое текст будет скрыт.
document.getElementById("myText").style.opacity = "1";
Где 1 - это максимальная прозрачность, в этом случае текст будет показан снова.