Block style display: Все значения свойства display

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

Вопрос задан 1 год 9 месяцев назад

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

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

Пытаюсь сделать переход между блоками путём скрытия и показа их пользователю. Есть блок «приветствия», на которой ссылки. По нажатии на ссылку скрывается этот блок и появляется блок с необходимым контентом, но при это в атрибуте, нужного блока, 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

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

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

Почта

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

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

Почта

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

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

Не виден элемент — webdriver

brutusimpuls 01.

#1

Проблема такая, не видны элементы (подпункты меню) соответственно не могу кликнуть на нужный элемент.

Изначально элемент скрыт

<div>
            <div>
                <a href="/ru/sale/women">Для женщин</a>
                <a href="/ru/sale/men">Для мужчин</a>
            </div>
        </div>

Далее, я средствами вебдрайвера кликаю на пункт меню, в котором находятся эти подпункты и они отображаются.

<div>
            <div>
                <a href="/ru/sale/women">Для женщин</a>
                <a href="/ru/sale/men">Для мужчин</a>
            </div>
        </div>

Далее я попытался найти элемент следующим образом:

sale=WebDriverWait(driver,10).until(EC.visibility_of_element_located((By.ID,"mm_s_w")))
sale.click()

К сожалению элемент для вебдрайвера остается не видимым.
Ошибка: TimeoutException

madvlaydin (Vladislav Abramov) 01.Февраль.2019 14:47:47

#2

Так может он и не видим, а что-то прозрачное сверху нарисовано

попробуйте кликнуть на элемент, селениум должен упасть с ошибкой, что другой элемент ответил на нажатие, и вот этот элемент как раз сверху нарисован

brutusimpuls

#3

В случае, если делаю следующим образом:

sale = driver.find_element_by_id("mm_s_w")

появляется ошибка:
selenium.common.exceptions.ElementNotVisibleException: Message: element not interactable

brutusimpuls 01. Февраль.2019 15:01:27

#4

в случае клика мышкой по этому элементу:

Message: stale element reference: element is not attached to the page document

И перехожу в нужный раздел

antonio33 (antonio-33)

#5

Там точно нет аякс запроса при открытии меню? А если thread.sleep(или его аналог в вашем языке) на секунд пять поставить после открытия меню, И потом попытаться кликнуть по нужному пункту?

Volodymyr (Volodymyr Romanyshyn) 05.Февраль.2019 10:22:15

#6

brutusimpuls:

mm_s_w

Можно сначала проверить в консоли, действительно ли елемент есть только один //(@id = ‘mm_s_w’)
если один попробуйте xpath //div(@class= ‘mm_sub2w active’)//(@id = ‘mm_s_w’)

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

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Использование различных отображаемых значений:

p. ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство display определяет поведение дисплея (тип поля рендеринга) элемента.

В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей браузера/пользователя по умолчанию. значение по умолчанию в XML — встроенное, включая элементы SVG.

Показать демо ❯

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Примечание: Значения «flex» и «inline-flex» требуют префикса -webkit- для работы в Safari.

Примечание. «отображение: содержимое» не работает в Edge предыдущая версия 79.

Синтаксис CSS

display: value ;

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

Значение	Описание	Играй
встроенный	Отображает элемент как встроенный элемент (например, ). Любые свойства высоты и ширины не будут иметь никакого эффекта	Демонстрация ❯
блок	Отображает элемент как элемент блока (например, ). Он начинается на новая строка и занимает всю ширину	Демонстрация ❯
содержимое	Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент следующего уровня в DOM
гибкий	Отображает элемент как гибкий контейнер на уровне блока
сетка	Отображает элемент как контейнер сетки на уровне блоков
встроенный блок	Отображает элемент как блочный контейнер встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины
встроенный гибкий	Отображает элемент как гибкий контейнер встроенного уровня
встроенная сетка	Отображает элемент как контейнер сетки встроенного уровня
встроенный стол	Элемент отображается как таблица встроенного уровня
элемент списка	Пусть элемент ведет себя как элемент	Демонстрация ❯
обкатка	Отображает элемент как блочный или встроенный, в зависимости от контекста
стол	Позволяет элементу вести себя как элемент заголовок таблицы Позволяет элементу вести себя как элемент группа столбцов таблицы Пусть элемент ведет себя как элемент таблица-заголовок-группа Пусть элемент ведет себя как элемент таблица-нижний колонтитул Пусть элемент ведет себя как элемент таблица-строка-группа Пусть элемент ведет себя как элемент таблица-ячейка Пусть элемент ведет себя как элемент таблица-столбец Пусть элемент ведет себя как элемент таблица-строка Пусть элемент ведет себя как элемент нет Элемент полностью удален начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать Дополнительные примеры Пример Демонстрация использования значения свойства содержимого. В следующих Например, контейнер .a исчезнет, ​​и создание дочерних элементов (.b) дочерние элементы элемента следующего уровня в DOM: .a {   отображение: содержимое;   граница: 2 пикселя сплошной красный;   background-color: #ccc;   отступ: 10 пикселей;   ширина: 200 пикселей; } .b {   граница: 2 пикселя сплошного синего цвета;   background-color: голубой;   отступ: 10 пикселей; } Попробуйте сами » Пример Демонстрация использования наследуемого значения свойства: body {   display: inline; } p {   display: inherit; } Попробуйте сами » Пример Установите направление некоторых гибких элементов внутри элемента в обратном направлении порядок: div {   display: flex;   flex-direction: row-reverse; } Попробуйте сами » Связанные страницы Учебное пособие по CSS: Отображение CSS и видимость Ссылка HTML DOM: свойство отображения ❮ Назад Полное руководство по CSS Следующий ❯ ВЫБОР ЦВЕТА Лучшие учебники Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебник по Python Учебник по W3. CSS Учебник по Bootstrap Учебник по PHP Учебник по Java Учебник по C++ Учебник по jQuery Лучшие ссылки HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference Top7 Examples Примеры HTML Примеры CSS Примеры JavaScript Примеры инструкций Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery FORUM 90 | О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности. Copyright 1999-2023 Refsnes Data. Все права защищены. W3Schools работает на основе W3.CSS. 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 > головка >   < корпус > 0    0022 h3 >          HTML DOM Display Property      h3 >             < p > Нажмите кнопку, чтобы установить          свойство отображения      p >             < div id = "GFG">          Geeks for Geeks      div > < Кнопка Onclick = "Mygeeks ()"> Press 9003 . 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 свойство H3 > 9003 0023 < p >          Click on the button to set          display property      p >             < div id = "GFG">          Компьютерщики для компьютерщиков 9 0003  023 div >             < button onclick="myGeeks()">          Press      Кнопка > < СКРИПТ > 9003 0014 Функция Mygeeks () { Document. getElementByID («GFG»). Стиль.display = "нет";          }      script > body >   html > Вывод: Перед нажмите кнопку: После нажатия на кнопку: Пример 3: 0101010110110 годы. ценить. html < html > 03 < head >      < title >          HTML DOM Style display Property      title > головка >   < корпус > 900 240023 < h3 >          HTML DOM Display Property      h3 >             < p >          Нажмите кнопку, чтобы установить0023 p >             < div id = "GFG">          Geeks for Geeks      Div > < Кнопка ONCLICK = "Mygeeks ()"> 9003 29 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 0022             < p >          Click on the button to set          display property      p > < Div ID = "GFG"> Гики для гумопроизводителей 0023      div >             < button onclick="myGeeks()">          Press      Кнопка > < . Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт