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

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

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

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

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

Рабочий скрипт

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

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

Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет 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.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("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 или более, вы можете расширить этот объект и добавить к нему дополнительные свойства и проверить.

Есть несколько способов проверить, виден или скрыт элемент в 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');
  

Подробнее см. 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
    }

Подробнее читайте на http://api.jquery.com/is/.

Просто проверьте, видим ли этот элемент, и он вернет логическое. jQuery скрывает элементы, добавляя к элементу display none, поэтому, если вы хотите использовать чистый 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
}

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

$(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>

Вот как 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, пока элемент виден.

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

Элементы можно считать скрытыми по нескольким причинам:

• У них нет отображаемого значения CSS.
• Это элементы формы с type = "hidden".
• Их ширина и высота явно равны 0.
• Элемент-предок скрыт, поэтому элемент не отображается на странице.

Элементы с видимостью: скрытый или непрозрачность: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете. Во время анимации, скрывающей элемент, элемент считается видимым до конца анимации.

Источник: : скрытый селектор | Документация по jQuery API

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

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

 // 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  
   // };  

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

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

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

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

.show{ display: block; }

1 • решение jQuery

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

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

Цикл для всех visible дочерних элементов 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

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

Используя jQuery, создайте элемент «display: none» в CSS для скрытого.

Дело в том:

$('element:visible')

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

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

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

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

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

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

Документация по API: visible Selector

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

jQuery

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

Ваниль

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

Or

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>

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

$('element:hidden')

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

$('element:visible')

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

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

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

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

Вот обзор модель-представление-представление-модель. архитектура (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; он обращается к модели представления.

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

Он возвращает 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;
}

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

.show{ display :block; }

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

В качестве примера,

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

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

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

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

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

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

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

Пытаться

content.style.display != 'none'

function toggle() {
  $(content).toggle();
  let visible= content.style.display != 'none'
  console.log('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>

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

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');
  }
});

Приведенный ниже код проверяет, скрыт ли элемент в 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.");
                }
            });
        });

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

   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{

  }