How to check the visibility of a div (javascript)

Question

Html

<div id="greenn31"></div>

css

#greenn31{
    background-color:#093;
    float: left;
    height: 25px;
    width: 25px;
    margin-left: 544px;
    margin-top: 51px;
    position:absolute;
    visibility:hidden;
}

Javascript

if (!$("#greenn31").css('visibility') === 'hidden') {
               alert (source3);
               document.getElementById("greenn31").style.visibility = "visible";
               source3 = source3 - node31;
             }

How i could check the visibility of div green31? Thanks for your interest!

Your code work fine check https://jsfiddle.net/p7hk6wpo/1/. – Zakaria Acharki Apr 08 '16 at 09:23 — Zakaria Acharki, Apr 08 '16 at 09:23

Zakaria Acharki · Answer 1 · 2016-04-08T09:06:51.227

1

Your code work fine check the Example Fiddle.

I'll just suggest to use display instead of visibility it's more efficient when you want to hide elements (see the difference below) then you could use jQuery function is() with selector :visible.

display attribute with none value will hide the element and hide also the space allocated for this element in the page.

visibility attribute with hidden will hide the element but space that is allocated for it still on the page.

Hope this helps.

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

#greenn31{
  background-color:#093;
  float: left;
  height: 25px;
  width: 25px;
  margin-left: 544px;
  margin-top: 51px;
  position:absolute;
  display:none;
}

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

edited Apr 08 '16 at 09:06

answered Apr 08 '16 at 08:59

Zakaria Acharki

66,747
15
75
101

1

"*it's more efficient when you want to hide elements*" It highly depends on your layout and the use case, both are as efficient, they just don't do the same thing. – Kaiido Apr 08 '16 at 09:10
What you mean by _they just don't do the same thing_? the both can be used for display/hidding purpose.. and you could find the one and only (difference) between them in the answer. – Zakaria Acharki Apr 08 '16 at 09:12
1

`Visibility: hidden` keeps the space occupied. `display: none` doesn't. So that's why they don't do the same. – Pimmol Apr 08 '16 at 09:15
They do the same thing (hidding element) with one difference (allocated space) and that exactly what you'll find in my post. – Zakaria Acharki Apr 08 '16 at 09:18

score 1 · Answer 2 · answered Apr 08 '16 at 09:01

1

If you're already mixing plain JS with jQuery, I would suggest switching to plain JS :)

var el = document.getElementById('greenn31');
var style = window.getComputedStyle(el);

if (style.visibility === 'hidden') {
    el.style.visibility = 'visible';
}

https://jsfiddle.net/zo2mbys4/

answered Apr 08 '16 at 09:01

Pimmol

1,871
1
8
14

Nothing. But why do it with jQ if that's not needed in this case? – Pimmol Apr 08 '16 at 09:13
Why you think that this is the fully js he use? – Zakaria Acharki Apr 08 '16 at 09:16

score 0 · Answer 3 · answered Apr 08 '16 at 09:45

0

You can try with below code:

if ($("#greenn31").css('visibility') === 'hidden') {
    $("#greenn31").css({'visibility': 'visible'});
 }

answered Apr 08 '16 at 09:45

Pranab Mitra

401
1
4
9

How to check the visibility of a div (javascript)

3 Answers3