How to check if the element is visible

Question

How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..

I tried using this code but it's not working.

    <div class="well me">
         <label for="majore">Major Exam</label>
            <div class="input-group">
                 <input type="text" class="form-control majore" id="majore" oninput="total();"/>
            <span class="input-group-addon">
              <i class="fa fa-percent"></i>
             </span>
              </div>
     </div>

     <script>
            if ($('.me').is(':visible')) {                          
                  mt = m / 100 * 50 + 50;
                } 
    </script>

Answer 1

 "none" == document.getElementById("element").style.display //Check for hide

 "block" == document.getElementById("element").style.display //Check for show

you can use like also

  if ($('#element').css('display') == 'none') {
    alert('element is hidden');
 } 

Answer 2

Checks for display:[none|block], ignores visible:[true|false]

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

Answer 3

It seems your selector is wrong.

Example of $("[element]").is(":visible") below: (for refrence)

$("#show").on("click", function() {
  $("#text").show();
})
$("#hide").on("click", function() {
  $("#text").hide();
})
$("#getStatus").on("click", function() {
  alert($("#text").is(":visible"));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>

Answer 4

$('.me') is a class selector which will return array of elements where elements have class me.

So you need to target the specific div either by using this or by using index as there can be many elements with same class name.

$('.me').is(':visible') this will check the first element and return result according to first element's visibility.

You can try

$(".me").eq(1).is(':visible')    //Here 1 is index of div which can vary

OR

$(this).is(':visible')