Div для отображения: none в классе css - почему я не могу переопределить его и показать div в теле?

У меня действительно простая внешняя таблица стилей CSS, которая имеет следующее:

div.hideBox {
display:none;
}

Поэтому, когда загружается страница html, div с атрибутом класса 'hideBox' не будет отображаться на странице, что я и хочу. Но я должен показать/показать, когда пользователь нажимает кнопку на той же странице. Я попытался использовать событие onclick для этого, но div не будет отображаться.

Так, например, код будет выглядеть следующим образом:

<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}

</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">

Что странно, что настройка, подобная этой, работает, когда я использую visibility:hidden; position:absolute;, и я могу использовать функцию JavaScript, чтобы показать <div>.

Что я здесь делаю неправильно?

Ответ 1

Поскольку установка свойства стиля div display на "" ничего не меняет в правиле CSS. Это в основном просто создает правило "пустое", встроенное CSS, которое не имеет эффекта, кроме как очистить одно и то же свойство от этого элемента.

Вам нужно установить его в значение, имеющее значение:

document.getElementById('mybox').style.display = "block";

То, что вы делаете, будет работать, если вы заменили стиль inline на div, например:

<div id="myBox" style="display: none;"></div>

document.getElementById('mybox').style.display = "";

Ответ 2

document.getElementById('mybox').style.display = "block";

Ответ 3

попробуйте настроить отображение блока в вашем javascript вместо пустого значения.

Ответ 4

Я вижу, что вы хотите написать собственный короткий javascript для этого, но считаете ли вы, что вместо этого используете Framework для HTML-манипуляции? jQuery - мой предпочтительный инструмент для такой задачи, хотя его избыток для вашего текущего вопроса, так как он имеет много дополнительных функций.

Посмотрите здесь jQuery