Geek Answers Handbook

How to check if an item is visible

How to find out if my element displayed or not using javascript . I am using $('#element').hide(); , $('#element').show(); to hide or show the item. How can I check if element displayed? The item is modal. I tried to change an element that is not modal, and it worked, but when I put the element inside the modal, it does not work.

I tried using this code, but it does not work.

  <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>
+5
source share
6 answers
  "none" == document.getElementById("element").style.display //Check for hide "block" == document.getElementById("element").style.display //Check for show

you can also use

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

I came across this question when I was looking for an answer, how to logically check if an HTML element is visible or not in JavaScript. Although Pravin answers what to do correctly, I noticed that if the display value, for example,

 element.style.display === 'inline'

then Pravin’s code probably won’t work for this case, because it only checks the values "none" and "block" .

In addition, I needed to understand how to correctly read the style.display property so that it would not appear as an empty line in the output of console.info () when debugging unit tests. I don’t have enough reputation to comment on the accepted answer, so here’s another suggestion. The actual value of style.display can be read using the function

 window.getComputedStyle()

As a good example, I wrote the isLabelVisible function to check the visibility of a linked label for some <select> dropdowns.

Here is my solution for the isLabelVisible function, only using JavaScript:

 const isLabelVisible = (id) => { const styles = window.getComputedStyle(document.querySelector('label[for=${id}]'), null); if (styles.display === 'none') return false; return true;

};

Elements must be part of the DOM tree in the body of the document. For example, flex or grid or block will be recognized as “visible” using this logic. Only none values ​​will be shown as hidden on the page.

+1
source

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

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

Your selector seems to be wrong.

Example $("[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>
0
source

$('.me') is a class selector that returns an array of elements where the elements have class me .

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

$('.me').is(':visible') this checks the first element and returns the result according to the visibility of the first element.

You can try

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

OR

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

You can check the link below for the link: visible selector.

https://api.jquery.com/visible-selector/ http://www.w3schools.com/jquery/sel_visible.asp

Also check out the w3schools example.

0
source

More articles:


All Articles