Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Как проверить видим блок/элемент через js скрипты примеры

Поддержи проект!!!

Видимость блока/элемента отследить через javascript. Узнать видим/невидим блок на странице js. Как определить скрыт ли блок!?

Давно надо было разобраться в этом вопросе - видимость блока javascript и разобрать, все способы, какие только существуют на тему видимости блока в javascript!

Все способы проверить видимость блока/элемента в javascript

  1. Видимость блока - что это!?
  2. Проверка видимости при display none в -> теге
  3. Проверка видимости при display none в -> стилях
  4. Проверка видимости при visibility: hidden в -> теге
  5. Проверка видимости при visibility: hidden в -> стилях
  6. Проверка видимости при opacity:0 в -> теге
  7. Проверка видимости при opacity:0 в -> стилях
  8. Скачать можно здесь
  1. Видимость блока - что это!?

    Что имеется ввиду, когда мы говорим о видимости блока!?

    1). Наличие - отсутствие display:none в блоке - это довольно просто, vbs касались этой темы.
    1.1). Наличие - отсутствие display:none в стилях - это уже мы приходим к видимости блока...
    2). Наличие - отсутствие visibility: hidden в теге.
    2.1). Наличие - отсутствие visibility: hidden в стилях.
    3). Наличие - отсутствие opacity:0 в теге.
    3.1). Наличие - отсутствие opacity:0 в стилях.

    Как будем проверять видимость блока!?

    Каждому способу напишем скриптик, и будем выводить результат проверки видимости через alert! Нашел вот такую замечательную функцию, которая нам поможет частично!

    Если блок видим, то функция вернет true если блок невидим, то функция вернет false

    function visible(element) {

    if (element.offsetWidth === 0 || element.offsetHeight === 0) return false;

    var height = document.documentElement.clientHeight,

    rects = element.getClientRects(),

    on_top = function(r) {

    var x = (r.left + r.right)/2, y = (r.top + r.bottom)/2;

    return document.elementFromPoint(x, y) === element;

    };

    for (var i = 0, l = rects.length; i < l; i++) {

    var r = rects[i],

    in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height);

    if (in_viewport && on_top(r)) return true;

    }

    return false;

    }

  2. Проверка видимости при display none в теге

    Чтобы сто раз одну и ту же функцию на повторять в коде, сделаем ссылку на данную функцию function visible
    Для того, чтобы нам воочию проверять видимость блока при display none нам понадобятся Живые примеры:

    display none может располагаться в тегах, в атрибуте style.

    1). Создадим подопытный div, в котором разместим display:none;:
    <div style="display:none;" id="example_display_none">Это подопытный блок с атрибутом style=display:none</div>
    2). Нам понадобится кнопка, чтобы вживую проверять видимость блока при display:none;:
    <button id=button_example_display_none>Проверяем видимость блока при display none</button>
    3). При нажатии кнопки... получим содержание между тегами innerHTML и вторым пунктом выведем виден ли блок или нет:

    alert(example_display_none.innerHTML);

    alert(visible(example_display_none));

    Весь скрипт:

    <script>

    сюда вставляем function visible

    button_example_display_none.onclick = function()

    {

    alert(example_display_none.innerHTML);

    alert(visible(example_display_none));

    }

    </script>

    4). Результат:
    Как видим... при втором выводе нам выходит ответ, что при display:none; внутри тега видимость блока false - т.е. блок невидим!

  3. Проверка видимости при display none в -> стилях

    1). Создадим класс, не мудрствуя лукаво просто назовем его display_none, которому присвоим значение display: none;:

    .display_none {

    display: none;

    }

    2). Создаем снова подопытный div, в него помещаем данный класс:
    <div class="display_none" id="example">Это подопытный блок с классом display_none</div>
    3). Нам опять понадобится кнопка по нажатию на которую будем изучать виден ли наш блок с display: none; внутри стилей:
    <button id=display_none_into_style>Проверим можно ли увидеть видимость блока внутри стилей</button>
    4). Повторяем аналогичный скрипт, что шел в выше идущем пункте:

    <script>

    сюда вставляем function visible

    display_none_into_style.onclick = function()

    {

    alert(example.innerHTML);

    alert(visible(example));

    }

    </script>

    5). Результат:

    Чтобы проверить виден или нет блок с display none приписанном в стилях, нажмите на кнопку:

    Это подопытный блок с классом display_none

  4. Проверка видимости при visibility: hidden в -> теге

    1). Делаем очередной блок со свойством visibility и значением hidden:
    <div style="visibility:hidden" id="example_visibility">Это подопытный блок с visibility:hidden в теге</div>
    2). Далее нам снова понадобится кнопка по которой будем проверить видимость блока при visibility: hidden внутри тега:
    <button id=button_visibility>Проверим видимость блока при visibility hidden в теге</button>
    3). Опять скрипт, который покажет нам виден ли блок при visibility hidden

    <script>

    сюда вставляем function visible

    button_visibility .onclick = function()

    {

    alert(example_visibility.innerHTML);

    alert(visible(example_visibility));

    }

    </script>

    4). Результат:

    Как видим после нажатия кнопки, наш бок отлично определяется как false -Б что означает, что блок невидим!:

  5. Проверка видимости при visibility: hidden в -> стилях

    1). Нам понадобится для следующего эксперимента, какой-то класс со свойством и значением visibility: hidden;:

    .hidden {

    visibility: hidden;

    }

    2). Поместим в наш очередной блок данный класс:
    <div class="hidden" id="example_hidden">Это подопытный блок с классом hidden-visibility: hidden</div>
    3). Очередная кнопка:
    <button id=button_hidden>hidden</button>
    3). Тоже самое повторяем со скриптом, который покажет нам виден ли блок:

    <script>

    сюда вставляем function visible

    button_hidden.onclick = function()

    {

    alert(example_hidden.innerHTML);

    alert(visible(example_hidden));

    }

    4). Результат:
    Для того, чтобы проверить виден ли блок при visibility: hidden - нажмите на кнопку:

  6. Проверка видимости при opacity:0 в -> теге

    Надеюсь из предыдущих пунктов вы вынесли для себя основной алгоритм проверки видимости блока!

    Не будем расписывать по каждой строчке проверку видимости при opacity:0 , в div помещаем данное свойство в style,

    + Кнопка, по которой будем нажимать

    + Скрипт - при проверке opacity выше использованная функция не работает..., поэтому просто сделаем условие и проверим с помощью getComputedStyle по нашему id = example_opacity_1, и присоединим к ним opacity и собственно проверим не ноль ли там в значении... opacity

    <div style="opacity:0" id="example_opacity_1">Это подопытный блок style="opacity:0"</div>

    <button id=button_opacity_1>Проверим видимость блока при style="opacity:0"</button>

    <script>

    button_opacity_1.onclick = function()

    {

    alert(example_opacity_1.innerHTML);

    if(window.getComputedStyle(example_opacity_1).opacity =='0')

    {

    alert(window.getComputedStyle(example_opacity_1).opacity);

    //здесь производим соответствующее действие, если вам нужно отследить невидимость блока при opacity

    }

    }

    </script>

    Проверяем видимость блока при opacity:0

    Это подопытный блок style="opacity:0"

  7. Проверка видимости при opacity:0 в -> стилях

    Ну и собственно второй способ opacity отличается тем, что opacity:0 поместим в стили:

    <style> .opacity_0 { opacity: 0; }</style>

    <div class="opacity_0" id="example_opacity_2">Это подопытный блок</div>

    <button id=button_opacity_2>button_opacity_2</button>

    <script>

    button_opacity_2.onclick = function()

    {

    alert(example_opacity_2.innerHTML);

    if(window.getComputedStyle(example_opacity_2).opacity ==\'0\')

    {

    alert(window.getComputedStyle(example_opacity_2).opacity);

    }

    }

    </script>

    Результат проверки видимости блока при opacity:0 внутри стилей

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


Вас может еще заинтересовать список тем : #JS | #JS_JQUERY |
Последняя дата редактирования : 2020-02-28 07:01
Название скрипта :Видимость элемента JS
Скрипт № 53.2Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Видимость div jsВидимость блока jsВидимость элемент jsjs проверить видимость элементавидимость элементавидимость элемента js javascript видимость элемента

Последние комментарии :
Марат :
23/10/2020 01:15
Посмотрел... количество возможных знаков 3... почему у вас не получилось увидеть 2...…
подробнее.
Марат :
23/10/2020 01:05
Да! Тоже исправим...А с ссылкой... вроде бы исправлял... совсем недавно...сейчас проверю в чем там…
подробнее.
Марат :
23/10/2020 01:03
Спасибо за внимательность!1). Исправлено!2). Что-то я сразу не понял, о каком подтверждении идет речь!?О любых…
подробнее.
Станислав :
23/10/2020 08:04
В Ранее отправленном комментарии о скрипте № 85.1 пункт 2 уже выяснен:Скорее всего комментарий не будет…
подробнее.
Станислав :
23/10/2020 07:39
1.Скрипт № 85.1имеется описка в слове: Ссылка на скачив-е-ние:2. Можно ли предусмотреть, чтобы после отправки…
подробнее.