Display none в js добавить удалить найти изменить
И конечно же сделаем удаление, добавление style=display none по клику в javascript
- Определим есть ли у элемента display none при загрузке :
Вариант №1 display noneнет
Вариант №2 display noneесть
- Как добавить display none при клике
- Как удалить display none при клике
- Как добавить и удалить display none при клике
- Где скачать готовый скрипт добавить и удалить display none при клике
- См. еще: видимость блока
- Скачать можно здесь
Определим есть ли у элемента display none при загрузке
<script>
if(example . style . display == "none")
{
example .innerHTML = "Блок имеет display none"; //строка 4
}
else
{
example .innerHTML = "Блок не имеет display none";//строка 8
}
</script>
Результат:
Соберем весь код вместе:
<div id="example_2"></div>
<div id="example_1" style="display:none;">Привет мир!</div>
<script>
if(example_1. style . display == "none")
{
example_2.innerHTML = "Блок имеет display none"; //строка 4
}
else
{
example_2.innerHTML = "Блок не имеет display none";//строка 8
}
</script>
Результат:
Как добавить display none при клике
<button id="id_button">Нажми на меня</button>
<script>id_button. onclick = function(){example_3.style.display="none";}</script>
Соберем весь код вместе:
<div id="example_3" style="border: 1px solid red; padding: 20px; margin: 20px;">привет мир!</div>
<button id="id_button">Нажми на меня</button>
<script>id_button. onclick = function(){example_3.style.display="none";}</script>
Результат:
Как удалить display none при клике
Чтобы удалить display none при клике нужно проделать ту же операцию. что была приведена выше, только мы добавляли display none, теперь будем удалять display none, нашего блока, по умолчанию не будет видно! И при удалении none блок покажется на экране.Код удаления display none в сборе:
<div id="example_4" style="border: 1px solid red; padding: 20px; margin: 20px; display:none;" >привет мир!</div>
<button id="id_button_1">Нажми на меня</button>
<script>id_button_1. onclick = function(){example_4.style.display="";}</script>
Результат:
Как добавить и удалить display none при клике
Теперь рассмотрим, какДля этого нам понадобится вся выше приведенная информация, все это скрестить и получится требуемый скрипт!
<div id="example_5">привет мир!</div>
<style>#example_5{border: 1px solid red; padding: 20px; margin: 20px;}</style>
<button id="id_button_2">Нажми на меня</button>
Иначе, добавлять
Соберем весь код вместе:
<style>#example_5{border: 1px solid red; padding: 20px; margin: 20px;}</style>
<div id="example_5">привет мир!</div>
<button id="id_button_2">Нажми на меня</button>
<script>
if(example_5. style . display == "none")
{
example_5.style . display= "";
}
else
{
example_5.style . display = "none";
}
</script>
Результат работы скрипта, удаление + добавление display == "none"
Где скачать готовый скрипт добавить и удалить display none при клике
Как обычно, если для страницы предусмотрен архив, то в самом низу текста будет архив... который можно скачать.
js display none
js style display none
js css display none
javascript display none
style display none javascript
javascript css display none
js изменить display
подробнее.
подробнее.
подробнее.

подробнее.