Display none в js добавить удалить найти изменить
Сегодня займемся display none в javascript , как добавить display none в js, как удалить в display none в javascript , изменить, найти, в общем все, что касается атрибута style=display noneИ конечно же сделаем удаление, добавление style=display none по клику в javascript
- Определим есть ли у элемента display none при загрузке :
Вариант №1 display none
нет
Вариант №2 display noneесть
- Как добавить 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>
Результат:
Во второй проверке на display none в блоке заранее разместим атрибут style со значением:
И поскольку id = example_1 будет невидимый, то нам понадобится какой-то второй блок, в который и будем отправлять наше сообщение, о существовании или не существовании в блоке example_1 display none:
Соберем весь код вместе:
<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>
Результат:
[kod]Как добавить 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>
Мы возьмем условие из первого пункта, в случае, если в блоке присутствует display == "none", то будем присваивать :
Иначе, добавлять
Соберем весь код вместе:
<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 при клике
Как обычно, если для страницы предусмотрен архив, то в самом низу текста будет архив... который можно скачать.