ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Видимость блока javascript

Попробуем разобраться в видимости и или невидимости блока. Оказалось, что не так все просто!

Мы возьмем несколько вариантов и посмотрим, как на это реагирует наша функция! Почему я делаю именно так,!? Чтобы можно было понять, как в действии можно увидеть реакцию на нажатие – показан блок или скрыт… На других сайтах показан код, но как он работает - очень часто просто они не утруждают себя чтобы показать на примере!

Первые 4 варианта мы сделаем через яваскрипт, а еще 4 через jquery
Давайте начнём с маленького отступления… и, скажем: мы в процессе изучения javascript и в реальности, когда ты не в теме, и каждый новый шаг освещает ли часть вашего пути, но никак невозможно увидеть полную картину мира…
И как-то мы касались(Хотя тема была про крестики нолики..) совсем вскользь темы :

HTMLCollection

И получали мы этот массив в консоль таким образом:

allBlock = document.getElementsByClassName("название_класса");

Этот массив данных о нашем классе, т.е. как я предполагал, все данные, которые только можно придумать все сидят в этом массиве и в том числе там должны были быть данные про display(который нам показывает – скрыт ли блок. Либо видим…), либо про hidden(примерно так же как и display), но оказалось, что нет! Ну по крайней мере я не смог это найти! И в интернете тоже!

К чему я сделал это отступление!? Раз этот путь не привел ни к чему.. придется идти другим путем!

Пример - проверить виден блок или нет

Возьмем простой код – у нас будет блок. Который в данном случае виден и внутри напишем текст

И кнопка после нажатия на которую выведем результат проверки на видимость…

И еще нужно добавить, что "display" может быть прописан в файле css либо в самом блоке

1.

Код:

<div id="myDiv">Это подопытный блок</div> //данный блок будем показывать и скрывть <button onclick="my_foo()">Жми!</button> //кнопка при нажатии на которую будем проверять виден ли блок иили нет.. <script> function my_foo(){ perim_hide = document.getElementById("myDiv").style.display;     alert(perim_hide); } </script>//скрипт, который будет проверять, что там с видимостью...

Вариант номер 1 – display - никак не присутсвует…

Результат:

Это подопытный блок

Здесь мы видим, что нашу видимость блока никак мы не можем получить, потому. Что свойство display – просто отсутствует как элемент…


2.

Добавим в стили "display: none" к первому варианту, таким образом:

Код:

<style>#myDiv_1{display: none;}</style>

Результат:

Это подопытный блок

Как видим мы опять ничего не получили, хотя в стилях display присутствует.

(Конечно, кто знает JS – может сказать, ты, что дЭбил!? Как можно оттуда получить эти данные. Если это разные вообще вещи! И я с вами соглашусь, но ведь для того, чтобы к этом прийти надо это знать, а мы исходим из того, что я ничего не знаю!)


3.

Теперь скроем блок с тестом немного по-другому… пропишем невидимость блока в самом блоке:

Код:

<div id="myDiv_2" style="display: none;">Это подопытный блок</div>

Результат:

Ну и вот! Наконец-то мы дождались, что свойство невидимости мы можем получить в переменную и вывести его с помощью алерта…


4.

Тоже самое, что и в пункте номер 3, только к блоку добавим «block» - как бы это странно не выглядело и ни звучало…

Результат:

Это подопытный блок(style="display: block;")

Здесь мы видим, то наше переменная равна тому, что у нас прописано в свойствах block.


Используем jquery для проверки видимости блока

Теперь давайте будем использовать jquery, вам нужно подключить эту библиотеку…
Начальный код будет точно такой же как и в пункте номер ! Кроме скрипта! Будем проверять видимость блока с помощью visible

Логика скрипта на 100% аналогичная с Js будем проверять наш блок видим или нет, и в переменную будем предавать возвращаемые данные… и выводить с помощью алерта:

Код:

<div id="myDiv_4"><red>Это подопытный блок - без "display" + jquery</div>

<button onclick="myDiv_4()">Жми!</button> 

<script> function myDiv_4(){ var isVisible = $("#myDiv_4").is(":visible");  alert(isVisible); } </script>

5.

В пятом пункте возьмем тот код. Что идет чуть выше и просто вставим его сюда и посмотрим, что нам выдаст после нажатия на кнопку…

Это подопытный блок - без "display" + jquery

Как видим в результате проверки видимости возвращает «true»


6.

Повторяем пункт 2 и скрываем блок с помощью стилей отдельных…

Код:

<style>#myDiv_5{display: none;}</style>

Результат:

Это подопытный блок - id="myDiv_5"

И видим, что наш скрипт возвращает «false» - когда блок невидм…


7.

В отдельные стили добавим display: block

Это подопытный блок - display: block; + jquery

Как и ожидалось, что если ваш див имеет свойство дисплей блок, то должно возвращать «true»


8.

Ну и последнее скроем блок с помощью стилей внутри блока.. как в пункте № 3.


Вывод : как определить видимость блока!?

Какой можно сделать вывод из наших телодвижений сверху!? Конечно же использовать jquery – логично, потому, что в любом из 4 приведённых примеров, функция возвращает нам именно то, что нам и требуется!

1.Если блок видим это «true»

2.Если блок не видим, то это будет «false»

И в зависимости от того, видим блок или нет, то делаем условие if .. и продолжаем код!

Не забудь !
Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 52.2
Название скрипта и номер :Видимость элемента JS

Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019