HTMLElement: скрытое свойство
У меня есть элемент HTML UL, который я хочу динамически скрыть с помощью свойства .hidden с помощью JavaScript. Проблема в том, что при наличии правила CSS: display:block для элемента скрытое свойство не работает.
document.getElementById('myid').hidden = true;#myid {
display: block;
}<div id = "myid">Lorem ipsum</div>Браузер корректно добавляет скрытое свойство к элементу, но элемент не скрывается, поскольку установлен display:block.
Я ожидал, что JavaScript переопределит CSS. Какой тогда смысл иметь скрытое свойство? Почему это? и это баг?
Какая польза? Если у вас нет стиля CSS, вы можете использовать свойство hidden.
Так что это бесполезно и ненадежно в динамических случаях, когда я не знаю, чего ожидать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно правило CSS [hidden] {display:none!important;}. Что-то вроде этого.
function toggle(){
var elem=document.getElementById('myid');
elem.hidden = !elem.hidden;
}#myid {
display: block;
}
[hidden]{
display:none!important;
}<div id = "myid">Lorem ipsum</div>
<button type = "button" onclick = "toggle()">Toggle</button>Фактически, речь идет об иерархии CSS (каскадных таблиц стилей). Подробное описание см., например, на сайте https://www.w3schools.com/css/css_specificity.asp
Интересно, не знал, что такое возможно.
Это потому, что hidden связано со свойством видимости . Однако есть еще свойство display. Ваш класс устанавливает для свойства display значение block, и поэтому оно противоречит visibility.
Вы можете переключать классы CSS, если хотите показать/скрыть весь элемент:
function toggle(){
const div = document.getElementById('myid');
div.classList.toggle("is-shown");
div.classList.toggle("is-hidden");
}
Классы CSS:
.is-hidden {
display: none;
}
.is-shown {
display: block;
}
HTML:
<div id = "myid" class = "is-shown">Lorem ipsum</div>
Если вы хотите переключать только visibility, вы можете предпочесть классы CSS:
.is-hidden {
visibility: hidden;
}
.is-visible {
visibility: visible;
}
Похоже, что
display: blockимеет приоритет, поскольку его удаление скрывает элемент.