Javascript не меняет атрибут элемента

Question

Javascript не меняет атрибут элемента

0

Я пытаюсь изменить атрибут "hidden" элемента true на javascript после таймаута 1000 миллисекунд, но он не меняет атрибут. Да, тайм-аут работает нормально. Я тестировал это, все функции верны! Только последняя часть, в которой с помощью функции setAttribute() не работает.

HTML:

<div id="gamePanel" hidden="true">
    <div id="bb">
        <div id="map">

        </div>
    </div>
    <p id="status"> Welcome Back! </p>
    <input type="button" id="changeBio" value="Change Map" />
    <input type="button" id="saveGame" value="Save Game" />
    <div id="statusBar"> Status </div>
</div>

Javascript:

var panel = document.querySelector("#gamePanel");
panel.setAttribute("hidden","false");

DaBaws 15 апр. 2014, в 21:24

Источник

0

Вы случайно не пытаетесь изменить этот атрибут HTML5 в более старой версии IE (или в режиме причуд)?
scunliffe 15 апр. 2014, в 18:54
0

@scunliffe Нет, я использую Google Chrome
Talha Tanveer 15 апр. 2014, в 18:55

Теги:

javascript

html

2 ответа

1

Лично я использовал бы это вместо этого:

var panel = document.getElementById("gamePanel");
panel.style.display = 'block';

или скрыть это:

panel.style.display = 'none';

DerStrom8 15 апр. 2014, в 16:42

0

Это намного чище и обратно совместимо. Были проблемы при использовании как скрытого атрибута, так и отображения для определения истинной видимости элементов (я вспоминаю ошибку WebDriver, особенно в августе 2013 года)
scunliffe 15 апр. 2014, в 19:02
0

hidden атрибут является семантическим. display:none является презентационным. Спецификации объясняет различия.
Oriol 15 апр. 2014, в 19:04

Ещё вопросы

Вы случайно не пытаетесь изменить этот атрибут HTML5 в более старой версии IE (или в режиме причуд)?
Это намного чище и обратно совместимо. Были проблемы при использовании как скрытого атрибута, так и отображения для определения истинной видимости элементов (я вспоминаю ошибку WebDriver, особенно в августе 2013 года)
hidden атрибут является семантическим. display:none является презентационным. Спецификации объясняет различия.

Oriol · Accepted Answer · 2014-04-15T17-18-00.000Z

использование

panel.removeAttribute("hidden");

Поскольку hidden атрибут является логическим атрибутом (спецификация определяет его таким образом),

Наличие логического атрибута для элемента представляет истинное значение, а отсутствие атрибута представляет ложное значение.

Тогда он не имеет true и false значений. Он может присутствовать (т. hidden или hidden="hidden"), или нет.

Или, что еще лучше, вы можете изменить hidden свойство:

panel.hidden = false;

Большое спасибо за это простое решение, оно работает, но оно испортило мой стиль CSS: S