Element hide css: 10 Ways to Hide Elements in CSS

Скрыть или показать элементы в HTML с помощью свойства отображения

Улучшить статью

Сохранить статью

  • Уровень сложности: Easy
  • Последнее обновление: 10 ноя, 2022

  • Читать
  • Обсудить
  • Улучшить статью

    Сохранить статью

    Свойство отображения стиля используется для скрытия и отображения содержимого HTML DOM путем доступа к элементу DOM с помощью JavaScript/jQuery.

    Чтобы скрыть элемент, установите для свойства отображения стиля значение «нет».

     document.getElementById("элемент").style.display = "нет"; 

    Чтобы отобразить элемент, установите для свойства отображения стиля значение «блок».

     document.getElementById("элемент").style.display = "блок"; 
    • Создайте несколько div и назначьте им идентификатор или класс, а затем добавьте к ним стиль.

    HTML

    < DIV Класс = "Circle" ID = 9 9 ID = 9 9 900 9 ID = 9 9. 0043 «circle» > div >

    < div class = "rounded" id = "rounded" > div >

    < div class = "square" id = "square" > div >

    • Ширина и высота будут устанавливать ширину и высоту содержимого, радиус границы 0% сделает границу квадратной, 50% сделает круг и 25% сделает округлую форму, а поплавок сделает div позиционируются, margin-right разделяет их пробелом справа.

    CSS

    Попробуйте демоверсию.

    Откройте демонстрацию, вы увидите элементы Я видим и Пустой текст и пробел между ними — скрытый второй элемент.

    Приведенный выше пример отображает содержимое HTML:

     

    html

    Я виден!

    Виден только мой пробел!

    Пустой текст

    Виден только мой пробел!
    применяет к элементу невидимый класс потому что value2 равно false (я знаю, что отрицание здесь сбивает с толку!).

    Обратите внимание, что вы также можете скрыть элемент, используя opacity: 0 , или даже сместить элемент за пределы окна просмотра, используя position: absolute; слева: -9999px . Просто создайте соответствующий класс CSS, а затем переключите его с помощью :class .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *