Как проверить видим блок/элемент через js скрипты примеры
Видимость блока/элемента отследить через javascript. Узнать видим/невидим блок на странице js. Как определить скрыт ли блок!?
Давно надо было разобраться в этом вопросе - видимость блока javascript и разобрать, все способы, какие только существуют на тему видимости блока в javascript!Все способы проверить видимость блока/элемента в javascript
- Видимость блока - что это!?
- Проверка видимости при display none в ->
теге - Проверка видимости при display none в ->
стилях - Проверка видимости при visibility: hidden в ->
теге - Проверка видимости при visibility: hidden в ->
стилях - Проверка видимости при opacity:0 в ->
теге - Проверка видимости при opacity:0 в ->
стилях - Скачать можно здесь
Видимость блока - что это!?
Что имеется ввиду, когда мы говорим о видимости блока!?
Как будем проверять видимость блока!?
Каждому способу напишем скриптик, и будем выводить результат проверки видимости через alert! Нашел вот такую замечательную функцию, которая нам поможет частично!
Если блок видим, то функция вернет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;
}
Проверка видимости при display none в теге
Чтобы сто раз одну и ту же функцию на повторять в коде, сделаем ссылку на данную функцию function visibleДля того, чтобы нам воочию проверять видимость блока при display none нам понадобятся
display none может располагаться в тегах, в атрибуте attribute style.
alert(example_display_none.innerHTML);
alert(visible(example_display_none));
Весь скрипт:
<script>
сюда вставляем function visiblebutton_example_display_none.onclick = function()
{
alert(example_display_none.innerHTML);
alert(visible(example_display_none));
}
</script>
Как видим... при втором выводе нам выходит ответ, что при display:none; внутри тега видимость блока false - т.е. блок невидим!
Проверка видимости при display none в -> стилях
.display_none {
display: none;
}
<script>
сюда вставляем function visibledisplay_none_into_style.onclick = function()
{
alert(example.innerHTML);
alert(visible(example));
}
</script>
Чтобы проверить виден или нет блок с display none приписанном в стилях, нажмите на кнопку:
Проверка видимости при visibility: hidden в -> теге
<script>
сюда вставляем function visiblebutton_visibility .onclick = function()
{
alert(example_visibility.innerHTML);
alert(visible(example_visibility));
}
</script>
Как видим после нажатия кнопки, наш бок отлично определяется как false -Б что означает, что блок невидим!:
Проверка видимости при visibility: hidden в -> стилях
.hidden {
visibility: hidden;
}
<script>
сюда вставляем function visiblebutton_hidden.onclick = function()
{
alert(example_hidden.innerHTML);
alert(visible(example_hidden));
}
Для того, чтобы проверить виден ли блок при visibility: hidden - нажмите на кнопку:
Проверка видимости при 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
Проверка видимости при 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 внутри стилей
Видимость div js
Видимость блока js
Видимость элемент js
js проверить видимость элемента
видимость элемента
видимость элемента js
javascript видимость элемента
Счетчик в график :
Построение гравиковОснова для графика : счетчик посещаемости.
На отдельной : странице.