Style display javascript: HTML DOM Style display Property

Leave a Comment / Разное / By /

javascript — В JS происходит изменение свойства display на block, а нужно flex. Команда есть, а js её не выполняет

Вопрос задан

Изменён 1 год 4 месяца назад

Просмотрен 255 раз

Пытаюсь сделать переход между блоками путём скрытия и показа их пользователю. Есть блок «приветствия», на которой ссылки. По нажатии на ссылку скрывается этот блок и появляется блок с необходимым контентом, но при это в атрибуте, нужного блока, style свойство display заменяется с none на block, хотя в js прописано document.getElementById('mem1').style.display = 'flex';

Код обработки:

<div>
  <form>
    Игра "Найди пересонажа" схожа с всемиизвестной игрой "Найди пару". Вы должны совместить элемент и персонажа, который этим элементом владеет. <br>
    <a href="javascript: void(0)">Первый</a>
    <a href="javascript: void(0)">Второй</a>
  </form>
</div>
<div>
  random text with example
</div>

В css у блока с id «mem1» у display стоит «flex». При обработке нажатия, по итогу, вместо «flex» в инспекторе отображается «block».

  • javascript
  • html
  • css

10

На первом скрине mem1, имевший display none стал block и в консоли тоже

.mem1{
    width: 650px;
    height: 650px;
    margin:  auto;
    display: flex;
    flex-flow: row wrap;
    perspective: 1000px;
}

Код выше — свойства, описанные в css файле

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

HTML | Свойство отображения стиля DOM

Просмотр обсуждения

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

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

  • Последнее обновление: 05 июн, 2022

  • Читать
  • Обсудить

    • Посмотреть обсуждение

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

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

    Свойство отображения Style в HTML DOM используется для установки или возврата типа отображения элемента. Это похоже на свойство видимости, которое отображает или скрывает элемент. С небольшой разницей display: none, скрывает весь элемент, а visible: hidden означает, что невидимым будет только содержимое элемента, но элемент останется в исходном положении и размере.

    Синтаксис:

    • Возвращает свойство отображения.
     object.style.display
    • Задает свойство отображения.
     object.style.display = значение;

    Значения свойств:

    • встроенный: Это значение по умолчанию. Он отображает элемент как встроенный элемент.
    • block: Визуализирует элемент как элемент уровня блока.
    • compact: Визуализирует элемент как блочный или встроенный, в зависимости от контекста.
    • flex: Отрисовывает элемент как блочный блок flex.
    • inline-block: Отображает элемент как блочный блок внутри встроенного блока.
    • inline-flex: Отрисовывает элемент как гибкий блок встроенного уровня.
    • inline-table: Отображает элемент как встроенную таблицу.
    • list-item: Отображает элемент в виде списка.
    • маркер: Устанавливает содержимое до или после блока в качестве маркера.
    • нет: Не будет отображаться ни один элемент.
    • run-in: Визуализирует элемент как блочный или встроенный, в зависимости от контекста.
    • таблица: Отображает элемент в виде таблицы блоков с разрывом строки до и после таблицы.
    • table-caption: Отображает элемент как заголовок таблицы.
    • table-cell: Отображает элемент как ячейку таблицы.
    • table-column: Отображает элемент как столбец ячеек.
    • table-column-group: Представляет элемент как группу из одного или нескольких столбцов.
    • table-footer-group: Отображает элемент как строку нижнего колонтитула таблицы.
    • table-header-group: Он отображает элемент как строку заголовка таблицы.
    • table-row: Отображает элемент как строку таблицы.
    • table-row-group:
      Элемент отображается как группа из одной или нескольких строк.
    • начальный: Устанавливает для свойства отображения значение по умолчанию.
    • наследование: Он наследует значения свойств отображения от своего родительского элемента.

    Возвращаемое значение: Возвращает строку, представляющую тип отображения элемента.

    Пример 1: В этом примере описывается встроенное значение свойства.

    html

    < html >

     

    < head >

         < title >

             HTML DOM Style display Property

         title >

    головка >

     

    < корпус >

         0151 h3 >

             HTML DOM Display Property

         h3 >

          

         < p >

    Нажмите кнопку, чтобы установить

             свойство отображения

         p >

          

         < div id = "GFG">

             Geeks for Geeks

         div >

    < Кнопка ONCLICK = "Mygeeks ()">

    0003

         button >

          

        

         < script >

             function myGeeks() {

                 document. getElementById("GFG").style.display

                        = "встроенный";

             }

         script >

    body >

     

    html >                   

    Вывод: До нажатия на кнопку:

      

    После нажатия на кнопку:

      

    Пример 2: В этом примере описывается значение свойства none.

    html

    < html >

     

    < head >

         < title >

             HTML DOM Style display Property

         title >

    head >

     

    < body >

         < h3 >

             HTML DOM Display Property

         h3 >

          

         < p >

             Click on the button to set

             display property

         p >

          

         < div id = "GFG">

             Компьютерщики для компьютерщиков 9 1   5152 div >

          

         < button onclick="myGeeks()">

             Press

         Кнопка >

    < Script >

  • 9
  • 9
  • 13 9000
  • 9
  • 9 > 0150 Функция Mygeeks () {

    Document. getElementByID ("GFG"). Стиль.display

    = "Name";

             }

         script >

    body >

     

    html >

    • Выход: Перед нажмите кнопку:

    После нажатия на кнопку:

    Пример 3: . ценность.

    html

    < html

    03

    < head >

         < title >

             HTML DOM Style display Property

         title >

    головка >

     

    < корпус >

    0 901 52 < h3 >

             HTML DOM Display Property

         h3 >

          

         < p >

             Нажмите кнопку, чтобы установить0152 p >

          

         < div id = "GFG">

             Geeks for Geeks

         DIV >

    < Кнопка ONCLICK = "MyGeeks ()">

    ONCLICK = "MyGeeks ()">

    . 0152 Press

         button >

          

        

         < script >

             function myGeeks() {

                 document.getElementById("GFG").style.display

                         = "table-caption";

             }

         script >

    body >

     

    html >                   

    Вывод: До нажатия на кнопку:

      

    После нажатия на кнопку:

      

    Пример 4: В этом примере описывается значение свойства блока.

    html

    < html >

     

    < head >

         < title >

             HTML DOM Style display Свойство

         title >

    head >

     

    < body >

         < h3 >

             Свойство отображения HTML DOM

         h3 > 9 0151       

         < p >

             Click on the button to set

             display property

         p >

    < DIV ID = "GFG">

    Geeks для Geeks для Geeks

    для Geeks. 0152

         div >

          

         < button onclick="myGeeks()">

             Press

         Кнопка >

    < .0152 >

    Функция Mygeeks () {

    Document.getElementByID ("GFG").

             }

         script >

    body >

     

    HTML >

    Выход: Перед кликом на кнопке:

    . После клика на кнопке

    . После клики:

    . браузер, поддерживаемый Свойство отображения в стиле DOM , перечислены ниже:

    • Google Chrome 1 и выше
    • Edge 12 и выше
    • Internet Explorer 4 и выше
    • Firefox 1 и выше
    • Opera 7 и выше
    • Safari 1 и выше

    Отображение в стиле JavaScript отсутствует или скрытие jQuery более эффективно

    Нет ответа на этот вопрос. Будьте первыми, кто откликнется.

    Ваш ответ

    Связанные вопросы в веб-разработке

    JavaScript является независимым языком и может ... ПОДРОБНЕЕ

    ответил 27 июня в веб-разработке по раджата • 7 440 баллов • 55 просмотров

    • JavaScript
    • jquery

    Методы jQuery parent() и parent() возвращают ... ПОДРОБНЕЕ

    ответил 27 июня в веб-разработке по раджата • 7 440 баллов • 46 просмотров

    • jquery

    Как фильтровать данные JSON с помощью Javascript. .. ПОДРОБНЕЕ

    1 июля в веб-разработке по раджата • 7 440 баллов • 480 просмотров

    • JavaScript
    • jquery
    • json

    У меня есть div с этим классом... ПОДРОБНЕЕ

    20 июля в веб-разработке по гаурав • 18 960 баллов • 333 просмотра

    • jquery
    • CSS

    У меня есть div с этим классом... ПОДРОБНЕЕ

    21 июля в веб-разработке по гаурав • 18 960 баллов • 143 просмотра

    • jquery
    • CSS

    У меня есть ссылка в моем HTML: ПОДРОБНЕЕ

    26 июля в веб-разработке по гаурав • 18 960 баллов • 32 просмотра

    • JavaScript
    • jquery
    • HTML

    Привет, jQuery — это быстрый и лаконичный JavaScript ... ПОДРОБНЕЕ

    ответил 14 февраля 2020 г.

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

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