if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

Вышеупомянутый метод не учитывает видимость родителя. Чтобы также учитывать родительский элемент, вы должны использовать .is(":hidden") или .is(":visible").

Например,

<div id = "div1" style = "display:none">
  <div id = "div2" style = "display:block">Div2</div>
</div>

The above method will consider div2 visible while :visible not. But the above might be useful in many cases, especially when you need to find if there is any error divs visible in the hidden parent because in such conditions :visible will not work.

Вы можете использовать селектор hidden:

// Matches all elements that are hidden
$('element:hidden')

И селектор visible:

// Matches all elements that are visible
$('element:visible')

Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

Это то же самое, что и предложение Twernt, но применяется к одиночному элементу; а это соответствует алгоритму, рекомендованному в FAQ по jQuery.

Мы используем is () jQuery для проверки выбранного элемента с другим элементом, селектором или любым объектом jQuery. Этот метод просматривает элементы DOM, чтобы найти совпадение, которое удовлетворяет переданному параметру. Он вернет истину, если есть совпадение, в противном случае вернет ложь.

Часто, проверяя, видно что-то или нет, вы сразу же идете дальше и делаете с этим что-то еще. Цепочка jQuery упрощает это.

Поэтому, если у вас есть селектор, и вы хотите выполнить какое-либо действие с ним, только если он виден или скрыт, вы можете использовать filter(":visible") или filter(":hidden"), а затем связать его с действием, которое вы хотите выполнить.

Итак, вместо оператора if, например:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Или эффективнее, но еще хуже:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Вы можете сделать все в одной строке:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

От Как определить состояние переключенного элемента?

Вы можете определить, свернут ли элемент или нет, используя селекторы :visible и :hidden.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Если вы просто воздействуете на элемент на основе его видимости, вы можете просто включить :visible или :hidden в выражение селектора. Например:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Ни один из этих ответов не касается того, что, как я понимаю, является вопросом, который я искал, "Как обращаться с предметами, имеющими visibility: hidden?". Ни :visible, ни :hidden не справятся с этим, поскольку они оба ищут дисплей в соответствии с документацией. Насколько я мог определить, нет селектора для обработки видимости CSS. Вот как я решил это (стандартные селекторы jQuery, может быть более сжатый синтаксис):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

Это работает для меня, и я использую show() и hide(), чтобы сделать мой div скрытым / видимым:

if ( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

Селектор :visible согласно документация jQuery:

• They have a CSS display value of none.
• They are form elements with type = "hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

Это полезно в некоторых случаях и бесполезно в других, потому что, если вы хотите проверить, является ли элемент видимым (display != none), игнорируя видимость родителей, вы обнаружите, что выполнение .css("display") == 'none' не только быстрее, но и вернет проверку видимости правильно. .

Если вы хотите проверить видимость вместо отображения, вы должны использовать: .css("visibility") == "hidden".

Также примите во внимание дополнительные примечания jQuery:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

Кроме того, если вас беспокоит производительность, вам следует проверить Теперь вы видите меня ... показать / скрыть выступление (2010-05-04). И используйте другие методы для отображения и скрытия элементов.

Я бы использовал класс CSS .hide { display: none!important; }.

Чтобы скрыть / показать, я звоню .addClass("hide")/.removeClass("hide"). Для проверки видимости использую .hasClass("hide").

Это простой и понятный способ проверять / скрывать / отображать элементы, если вы не планируете использовать методы .toggle() или .animate().

Другой ответ, который вы должны принять во внимание: если вы скрываете элемент, вы должны использовать jQuery, но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его содержимое HTML и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя обычный if (!$('#thetagname').length).

Как видимость элементов и работа jQuery;

Элемент может быть скрыт с помощью display:none, visibility:hidden или opacity:0. Разница между этими методами:

• display:none скрывает элемент и не занимает места;
• visibility:hidden скрывает элемент, но по-прежнему занимает место в макете;

• opacity:0 скрывает элемент как «видимость: скрытый», но он по-прежнему занимает место в макете; единственная разница в том, что непрозрачность позволяет сделать элемент частично прозрачным;

  if ($('.target').is(':hidden')) {
    $('.target').show();
  } else {
    $('.target').hide();
  }
  if ($('.target').is(':visible')) {
    $('.target').hide();
  } else {
    $('.target').show();
  }
  
  if ($('.target-visibility').css('visibility') == 'hidden') {
    $('.target-visibility').css({
      visibility: "visible",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      visibility: "hidden",
      display: ""
    });
  }
  
  if ($('.target-visibility').css('opacity') == "0") {
    $('.target-visibility').css({
      opacity: "1",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      opacity: "0",
      display: ""
    });
  }
  

  Полезные методы переключения jQuery:

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });
  

Можно просто использовать атрибут hidden или visible, например:

$('element:hidden')
$('element:visible')

Или вы можете упростить то же самое с помощью является следующим образом.

$(element).is(":visible")

ebdiv должен быть установлен на style = "display:none;". Он работает как для отображения, так и для скрытия:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

Вы также можете сделать это с помощью простого JavaScript:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Заметки:

1. Работает везде

2. Работает для вложенных элементов

3. Работает с CSS и встроенными стилями

4. Не требует каркаса

Это может сработать:

expect($("#message_div").css("display")).toBe("none");

Демо Ссылка

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "clickme">
  Click here
</div>
<img id = "book" src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt = "" width = "300"/>

Источник:

Blogger Plug n Play - инструменты и виджеты jQuery: как узнать, является ли элемент скрытым или видимым с помощью jQuery

Чтобы проверить, не видно ли это, я использую !:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

Или следующее - это также sam, сохраняющий селектор jQuery в переменной, чтобы повысить производительность, когда он вам нужен несколько раз:

var $book = $('#book')

if (!$book.is(':visible')) {
    alert('#book is not visible')
}

Используйте переключение классов, а не редактирование стилей. . .

Использовать классы, предназначенные для «сокрытия» элементов, очень просто, а также это один из самых эффективных методов. Переключение класса «скрытый» со стилем Display на «none» будет работать быстрее, чем редактирование этого стиля напрямую. Я довольно подробно объяснил некоторые из этих вопросов в вопросе о переполнении стека Как сделать два элемента видимыми / скрытыми в одном div.

Лучшие практики и оптимизация JavaScript

Вот поистине поучительный видеоролик Google Tech Talk, сделанный фронтенд-инженером Google Николасом Закасом:

• Ускорьте свой Javascript (YouTube)

Пример:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.info('Hidden');
  }
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "checkme" class = "product" style = "display:none">
  <span class = "itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

Также вот тернарное условное выражение для проверки состояния элемента, а затем для его переключения:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

if ($('#postcode_div').is(':visible')) {
    if ($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

Вам нужно проверить как ... Отображение, так и видимость:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Если мы проверим $(this).is(":visible"), jQuery автоматически проверит и то, и другое.

Поскольку Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (как описано для jQuery: видимый селектор) - мы можем проверить, является ли элемент В самом деле видимым следующим образом:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

В конце концов, ни один из примеров мне не подходит, поэтому я написал свой.

Тесты (без поддержки Internet Explorer filter:alpha):

а) Проверьте, не скрыт ли документ

б) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или display:none / visibility:hidden во встроенных стилях

c) Проверьте, не скрыт ли центр (также потому, что это быстрее, чем проверка каждого пикселя / угла) элемента другим элементом (и всеми предками, например: overflow:hidden / scroll / один элемент над другим) или краями экрана.

d) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или display:none / видимость: скрыто в вычисленных стилях (среди всех предков)

Проверено на

Android 4.4 (собственный браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Престо / Mac WebKit), Internet Explorer (режимы документов Internet Explorer 5-11 + Internet Explorer 8 на виртуальной машине) и Safari (Windows / Mac / iOS).

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if (!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Как использовать:

is_visible(elem) // boolean

.is(":not(':hidden')") /*if shown*/

При тестировании элемента по селектору :hidden в jQuery следует учитывать, что элемент с абсолютным позиционированием может быть распознан как скрытый, хотя их дочерние элементы видны.

Во-первых, это кажется несколько нелогичным - хотя более внимательное рассмотрение документации jQuery дает соответствующую информацию:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 0. [...]

Так что это действительно имеет смысл применительно к блочной модели и вычисленному стилю для элемента. Даже если ширина и высота не установлены явно в 0, они могут быть установлены неявно.

Взгляните на следующий пример:

console.info($('.foo').is(':hidden')); // true
console.info($('.bar').is(':hidden')); // false

.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "foo">
  <div class = "bar"></div>
</div>

Обновление для jQuery 3.x:

С jQuery 3 описанное поведение изменится! Элементы будут считаться видимыми, если у них есть поля макета, в том числе с нулевой шириной и / или высотой.

JSFiddle с jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Затем тот же код JavaScript будет иметь следующий вывод:

console.info($('.foo').is(':hidden')); // false
console.info($('.bar').is(':hidden')); // false

Просто проверьте видимость, проверив логическое значение, например:

if (this.hidden === false) {
    // Your code
}

Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible') для проверки видимости элемента.

Но что, если CSS этого элемента выглядит следующим образом?

.element{
    position: absolute;left:-9999;    
}

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

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

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Рабочая рабочий пример

Может ты сможешь сделать что-то вроде этого

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if (visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});

<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>

<input type = "text" id = "tElement" style = "display:block;">Firstname</input>

Пример использования проверки видимый для активированного блокировщика рекламы:

$(document).ready(function(){
  if (!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "ad-placement" id = "ablockercheck"></div>
<div id = "ablockermsg" style = "display: none"></div>

ablockercheck - это идентификатор, который блокирует блокировщик рекламы. Поэтому, проверяя его, если он виден, вы можете определить, включен ли блокировщик рекламы.

if ($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}

Это какой-то вариант, чтобы проверить, виден ли тег или нет

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

if ($("h1").is(":hidden")){
    // your code..
}

Вы можете просто добавить класс, когда он будет виден. Добавьте класс show. Затем проверьте, есть ли у него класс:

$('#elementId').hasClass('show');

Он возвращает true, если у вас есть класс show.

Добавьте CSS следующим образом:

.show{ display: block; }

Вот как jQuery внутренне решает эту проблему:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Если вы не используете jQuery, вы можете просто использовать этот код и превратить его в свою собственную функцию:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Какой isVisible вернет true, пока элемент виден.

Вы можете использовать это:

$(element).is(':visible');

Пример кода

$(document).ready(function()
{
    $("#toggle").click(function()
    {
        $("#content").toggle();
    });

    $("#visiblity").click(function()
    {
       if ( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id = "content">This is a Content</p>

<button id = "toggle">Toggle Content Visibility</button>
<button id = "visibility">Check Visibility</button>

Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет false, если глаза не могут увидеть элемент.

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.info("this = " + "display:none");
        return false;
    }
    else if ( $(this).css('visibility') == 'hidden' ){
        console.info("this = " + "visibility:hidden");   
        return false;
    }
    else if ( $(this).css('opacity') == '0' ){
        console.info("this = " + "opacity:0");
        return false;
    }   
    else{
        console.info("this = " + "Is Visible");
        return true;
    }
  }  
});

Как и hide(), show() и toggle() прикрепляют встроенный CSS (display: none или display: block) к элементу. Точно так же мы можем легко использовать тернарный оператор, чтобы проверить, является ли элемент скрытым или видимым, проверив отображение CSS.

Обновлено:

• Вам также необходимо проверить, установлен ли элемент CSS на видимость: «видимый» или видимость: «скрытый».
• Элемент также будет виден, если для свойства отображения задано значение inline-block, block, flex.

Таким образом, мы можем проверить свойство элемента, которое делает его невидимым. Значит они display: none и visibility: "hidden";

Мы можем создать объект для проверки свойства, отвечающего за скрытие элемента:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

Мы можем проверить, просматривая каждое значение ключа в сопоставлении объектов, совпадает ли свойство элемента для ключа со значением скрытого свойства.

var isHidden = false;
for(key in hiddenCssProps) {
  if ($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

Если вы хотите проверить свойство, такое как высота элемента: 0 или ширина: 0 или более, вы можете расширить этот объект и добавить к нему дополнительные свойства и проверить.

Вы можете использовать

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

Документация по API: видимый селектор

Я просто хочу уточнить, что в jQuery

Elements can be considered hidden for several reasons:

• They have a CSS display value of none.
• They are form elements with type = "hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

Source: :hidden Selector | jQuery API Documentation

if ($('.element').is(':hidden')) {
  // Do something
}

Есть несколько способов проверить, виден или скрыт элемент в jQuery.

Демо HTML, например ссылка

<div id = "content">Content</div>
<div id = "content2" style = "display:none">Content2</div>

Используйте селектор фильтра видимости $('element:hidden') или $('element:visible')

• $('element:hidden'): выбирает все скрытые элементы.

  Example:
     $('#content2:hidden').show();
  

• $('element:visible'): выбирает все видимые элементы.

  Example:
     $('#content:visible').css('color', '#EEE');
  

Read more at http://api.jquery.com/category/selectors/visibility-filter-selectors/

Использовать фильтрацию is()

    Example:
       $('#content').is(":visible").css('color', '#EEE');

    Or checking condition
    if ($('#content').is(":visible")) {
         // Perform action
    }

Read more at http://api.jquery.com/is/

Существует слишком много методов проверки скрытых элементов. Это лучший выбор (я только что порекомендовал вам):

Using jQuery, make an element, "display:none", in CSS for hidden.

Дело в том:

$('element:visible')

И пример использования:

$('element:visible').show();

Честно говоря, вопрос предшествует ответу это.

Я добавляю это не для того, чтобы критиковать ОП, а чтобы помочь тем, кто все еще задает этот вопрос.

Правильный способ определить, является ли что-то видимым, - это обратиться к вашей модели представления;

Если вы не знаете, что это значит, вы собираетесь отправиться в путешествие открытий, которое значительно упростит вашу работу.

Вот обзор архитектуры модель-вид-вид-модель (MVVM).

KnockoutJS - это связывающая библиотека, которая позволит вам опробовать этот материал, не изучая всю структуру.

А вот код JavaScript и DIV, которые могут быть, а могут и не быть видимыми.

<html>
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
    var vm = {
        IsDivVisible: ko.observable(true);
    }
    vm.toggle = function(data, event) {
      // Get current visibility state for the div
      var x = IsDivVisible();
      // Set it to the opposite
      IsDivVisible(!x);
    }
    ko.applyBinding(vm);
</script>
<div data-bind = "visible: IsDivVisible">Peekaboo!</div>
<button data-bind = "click: toggle">Toggle the div's visibility</button>
</body>
</html>

Обратите внимание, что функция переключения не обращается к DOM, чтобы определить видимость div; он обращается к модели представления.

$('someElement').on('click', function(){ $('elementToToggle').is(':visible')

Просто проверьте, является ли этот элемент видимый, и он вернет логический. jQuery скрывает элементы, добавляя к элементу не отображать, поэтому, если вы хотите использовать чистый JavaScript, вы все равно можете это сделать, например:

if (document.getElementById("element").style.display === 'block') {
  // Your element is visible; do whatever you'd like
}

Кроме того, вы можете использовать jQuery, поскольку кажется, что остальная часть вашего кода использует его, и у вас есть меньший блок кода. Что-то вроде приведенного ниже в jQuery делает для вас тот же трюк:

if ($(element).is(":visible")) {
    // Your element is visible, do whatever you'd like
};

Также использование метода css в jQuery может привести к тому же результату:

if ($(element).css('display') === 'block') {
    // Your element is visible, do whatever you'd like
}

Также в случае проверки видимости и отображения вы можете сделать следующее:

if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
   // Your element is visible, do whatever you'd like
}

Просто проверьте атрибут display (или visibility в зависимости от того, какой вид невидимости вы предпочитаете). Пример:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}

Вы можете использовать класс CSS, когда он виден или скрыт, переключая класс:

.show{ display :block; }

Установите свой jQuery toggleClass(), addClass() или removeClass();.

Например,

jQuery('#myID').toggleClass('show')

Приведенный выше код добавит класс css show, если у элемента нет show, и удалит, если он имеет класс show.

И когда вы проверяете, виден он или нет, вы можете следовать этому коду jQuery,

jQuery('#myID').hasClass('show');

Приведенный выше код вернет логическое значение (true), если элемент #myID имеет наш класс (show), и false, если у него нет класса (show).

Ты можешь сделать это:

isHidden = function(element){
    return (element.style.display === "none");
};

if (isHidden($("element")) == true){
    // Something
}

Вместо того, чтобы писать event для каждого element, сделайте следующее:

$('div').each(function(){
  if ($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

Также вы можете использовать его на входах:

$('input').each(function(){
  if ($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});

Если вы хотите проверить, отображается ли элемент на странице, в зависимости от видимости его родительского элемента, вы можете проверить, равны ли width и height элемента 0.

jQuery

$element.width() === 0 && $element.height() === 0

Ваниль

element.clientWidth === 0 && element.clientHeight === 0

Или же

element.offsetWidth === 0 && element.offsetHeight === 0

Решение jQuery, но оно все же немного лучше для тех, кто хочет изменить текст кнопки:

$(function(){
  $("#showHide").click(function(){
    var btn = $(this);
    $("#content").toggle(function () {
      btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
    });
   });
 });

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id = "showHide">Hide</button>
<div id = "content">
  <h2>Some content</h2>
  <p>
  What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</div>

1 • решение jQuery

Методы определения видимости элемента в jQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Цикл по всем дочерним элементам div видимый элемента с id 'myelement':

$("#myelement div:visible").each( function() {
 //Do something
});

Заглянул в источник jQuery

Вот как jQuery реализует эту функцию:

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

2 • Как проверить, находится ли элемент за кадром - CSS

Используя Element.getBoundingClientRect (), вы можете легко определить, находится ли ваш элемент в границах вашего окна просмотра (т.е. на экране или вне экрана):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Затем вы можете использовать это несколькими способами:

// Returns all elements that are offscreen
$(':offscreen');

// Boolean returned if element is offscreen
$('div').is(':offscreen');

Если вы используете Angular, отметьте: Не используйте скрытый атрибут с Angular

Пытаться

content.style.display != 'none'

function toggle() {
  $(content).toggle();
  let visible= content.style.display != 'none'
  console.info('visible:', visible);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick = "toggle()">Show/hide</button>
<div id = "content">ABC</div>

Вы можете использовать функцию jQuery is(), чтобы проверить видимый или скрытый выбранный элемент. Этот метод просматривает элементы DOM, чтобы найти совпадение, которое удовлетворяет переданному параметру. Он вернет истину, если есть совпадение, в противном случае вернет ложь.

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>

Приведенный ниже код проверяет, является ли элемент скрытым в jQuery или видимым.

// You can also do this...

        $("button").click(function(){
            // show hide paragraph on button click
            $("p").toggle("slow", function(){
                // check paragraph once toggle effect is completed
                if ($("p").is(":visible")){
                    alert("The paragraph  is visible.");
                } else{
                    alert("The paragraph  is hidden.");
                }
            });
        });

Расширенная функция проверки видимости элемента, отсутствия отображения или даже уровня непрозрачности

Он возвращает false, если элемент не виден.

function checkVisible(e) {
    if (!(e instanceof Element)) throw Error('not an Element');
    const elementStyle = getComputedStyle(e);
    if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
    if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
        e.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: e.getBoundingClientRect().left + e.offsetWidth / 2,
        y: e.getBoundingClientRect().top + e.offsetHeight / 2
    };
    if (elemCenter.x < 0 || elemCenter.y < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === e) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}

Вы также можете:

   hideShow(){
  $("#accordionZiarat").hide();
  // Checks CSS content for display:[none|block], ignores visibility:[true|false]
  if ($("#accordionZiarat").is(":visible")) {
    $("#accordionZiarat").hide();
  }

  
  else if ($("#accordionZiarat").is(":hidden")) {
    $("#accordionZiarat").show();
  }

  else{

  }

Используя скрытый выбор, вы можете сопоставить все скрытые элементы

$('element:hidden')

Используя видимый выбор, вы можете сопоставить все видимые элементы

$('element:visible')

if ($(element).is(":visible")) {
  console.info('element is visible');
} else {
  console.info('element is not visible');
}