#css #visibility #display
#css #видимость #отобразить
Вопрос:
Если visibility свойству style HTML-элемента присвоено значение hidden , он все еще доступен для просмотра?
Когда display свойству присвоено значение none , элемент даже не является частью дерева DOM, так что это не проблема. Но мне было интересно, по-прежнему ли hidden элемент реагирует на события мыши.
Комментарии:
1. Он полностью удален из потока элементов, но я не уверен, удален ли он из дерева DOM…
2. Вы не совсем правы насчет «отображать: нет». Объект с «display: none» по-прежнему является частью DOM-дерева (так что вы можете найти его, например, с помощью jQuery), но он не является частью визуального дерева.
3. Если вы хотите, чтобы объект был интерактивным, вы можете вместо этого использовать ‘opacity’.
Ответ №1:
При этом display: none он по-прежнему является частью DOM. Он просто не отображается в окне просмотра.
Что касается щелчков по элементам с помощью visibility: hidden , события не запускаются.
$('div').click(function() {
alert('Hello')
}); div {
width: 100%;
height: 100%;
visibility: hidden;
} <div>abc</div> Комментарии:
1. @BoltClock Я не был уверен, в какую сторону это пойдет, но у меня было предчувствие, что это не сработает 🙂
2. можете ли вы дать мне ссылку на это??
3. @dramasea Цитирование: браузеры были повсюду
4. Кто-нибудь знает, все ли браузеры совместимы с этим? Я вроде помню, что в очень старых версиях Firefox
visibility: hiddenэлементы все еще запускали события щелчка, но, возможно, я путаю это с теми элементами, которые влияют на макет…5. У вас все еще нет никаких доказательств того, что его отсутствие является официальным стандартом.
Ответ №2:
Скрытие div или display none просто делает его недоступным для пользователя. Но на самом деле это все еще элемент в dom, и вы можете щелкнуть по нему с помощью другого java script / jquery, подобного этому.
$('div').click(function() {
alert('Hello')
});
$('div').click();
Комментарии:
1. Это правильный ответ. Отмеченный ответ @Alex неверен / вводит в заблуждение. Кто-то может спросить, зачем кому-то это нужно? У меня есть частичный просмотр в форме Ajax, и я хочу асинхронно обновлять его каждые X минут с обновлением частичного просмотра. Я добавил скрытую кнопку отправки в частичный вид и установил таймер, чтобы нажимать на кнопку каждые X минут, и я был в восторге! Мое решение проверит, не изменились ли какие-либо данные, а затем сохранит их обратно на сервер (например, автоматическое сохранение).
2. Спасибо MikeTeeVee
3. @MikeTeeVee не могли бы вы просто установить интервал, а затем собрать и опубликовать данные? кажется странным, что вам приходится скрывать элемент пользовательского интерфейса, чтобы щелкнуть по нему программно
4. @idkwhatsgoingon Я добавил
<button name="ActionVerb" value="Resume" data-AsyncPostback_RefreshInterval="@Model.PauseLimit" type="submit" hidden></button>отсюда, что у меня был некоторый Javascript, который искал любые"ActionVerb"кнопки (у которых не было стиля свойств"display:none;"), и он определял, какой интервал обновления использовать, и кнопка отправляла обратно глагол, который я хотел обработать (в данном случае «Возобновить», что вызвало бы обновление для меня). Это дало мне возможность написать JS один раз, затем поместить подобную кнопку в любом месте и немедленно подключить ее к таймеру.
Ответ №3:
Нет.
На такой элемент, как гиперссылка, нельзя щелкнуть (и перейти по ссылке), если для видимости установлено значение hidden. Аналогично, события onclick запускаться не будут.
Ответ №4:
Вы можете использовать useRef в react, добавить ref к своим входным данным и использовать его для вызова onClick, как показано ниже
import React, { useRef } from "react";
const input = useRef();
<input ref={input} type="file" />
а затем вызывайте все, что хотите, например, метод click
input.current.click();
Ответ №5:
HTML-элемент с visibiality: hidden нет visible , но он все равно занимает место на странице. Вы не можете запускать события (щелчок, наведение курсора мыши, …) с помощью мыши, но вы можете использовать javascript для доступа к нему через DOM и запуска событий.