Display none в js добавить удалить найти изменить

И конечно же сделаем удаление, добавление style=display none по клику в javascript

1. Определим есть ли у элемента display none при загрузке :
   Вариант №1 display none нет
   Вариант №2 display none есть
   
2. Как добавить display none при клике
3. Как удалить display none при клике
4. Как добавить и удалить display none при клике
5. Где скачать готовый скрипт добавить и удалить display none при клике
6. См. еще: видимость блока

Определим есть ли у элемента display none при загрузке

Вариант №1 - в блоке нет display none

Для иллюстрации проверки display none при загрузке нам потребуется какой то элемент, блок, див:

<div id="example">Привет мир!</div>
Далее нам нужен скрипт, который и определит есть ли в данном блоке, display none, создаем условие if, в котором проверяем есть ли в данном диве с id = example , атрибут style, со значением display и равно ли оно none
if(example . style . display == "none")
Если условие выполняется, то заменим слова Привет мир! с помощью innerHTML на слова -> Блок имеет display none, иначе(else) отправим туда же Блок не имеет display none

<script>

if(example . style . display == "none")

{

example .innerHTML = "Блок имеет display none"; //строка 4

}

else

{

example .innerHTML = "Блок не имеет display none";//строка 8

}

</script>

Результат:

Привет мир!
[kod]

Вариант №2 - в блоке есть display none

Во второй проверке на display none в блоке заранее разместим атрибут style со значением:

<div style="display:none;" id="example_1" >Привет мир!</div>

И поскольку id = example_1 будет невидимый, то нам понадобится какой-то второй блок, в который и будем отправлять наше сообщение, о существовании или не существовании в блоке example_1 display none:

<div id="example_2"></div>

Соберем весь код вместе:

<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 при клике

1). Нам опять нужен подопытный блок(выделим его красным бордюром...):

<div id="example_3" style="border: 1px solid red; padding: 20px; margin: 20px;">привет мир!</div>
2). Нам понадобится кнопка, по нажатию которой мы будем добавлять display none

<button id="id_button">Нажми на меня</button>

3). Нам потребуется одни из 4 вариантов onclick, который будет на кнопке

<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 при клике

Теперь рассмотрим, как добавить и удалить одной кнопкой display none при клике

Для этого нам понадобится вся выше приведенная информация, все это скрестить и получится требуемый скрипт!

1). Возьмем очередной блок, див, элемент:

<div id="example_5">привет мир!</div>

2). Выделим красный бордюр в отдельные стили, иначе работать не будет:

<style>#example_5{border: 1px solid red; padding: 20px; margin: 20px;}</style>

3). Нам понадобится кнопка, по нажатию на которую, будем удалять, добавлять display none при клике

<button id="id_button_2">Нажми на меня</button>

4).

Мы возьмем условие из первого пункта, в случае, если в блоке присутствует display == "none", то будем присваивать :

example_5.style . display= "";

Иначе, добавлять

example_5.style . 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 при клике

Как обычно, если для страницы предусмотрен архив, то в самом низу текста будет архив... который можно скачать.