22

i am trying trying to find out if a div style display is block then do something here is an e.g

this is just a guess i am tryng to do it in jquery

 if("#toshow":"display" == "block"){

 }else{

 }
Rickstar
  • 6,057
  • 21
  • 55
  • 74

5 Answers5

50

So you want to distinguish between display: block and display: none ? If so, you can better use the is() function in combination with the :visible selector for this:

if ($('#toshow').is(':visible')) {

} else {

}

This works regardless of if you used display: block, or display: inline, or display: inline-block.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • @Dustin: I'm not sure why you're posting a comment like that while this is very simple to experiment yourself. If you're having a problem with this specific case, it's caused elsewhere. – BalusC Apr 28 '13 at 19:02
  • 2
    Okay, let's put it this way. This will work if you want to know if the div is currently visible. This won't work if you want to know if the div is a block (the original question, which also led me to this stackoverflow question from a Google search.) In my case, I wanted to know if a (currently hidden) div was going to be hidden when I revealed the parent div. http://jsfiddle.net/ejVvu/1/ as you can see, this answer won't work to check if a div has a block attribute (the original question.) So, +1 for a "better" solution for current visibility, but not the answer to the question. – Dustin Graham Apr 29 '13 at 20:00
  • @Dustin: the answer just answered what the OP **actually** needed. See also http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem – BalusC Apr 29 '13 at 20:10
  • Your point is valid, I'm not sure what the right approach is here since the way the OP worded his question, was *exactly* what I needed to know, which Brian answered. Yet, with the XY problem philosophy, and the fact that the OP's div ID was #toshow, you may be correct to infer that he actually needed a way to determine if something was visible in the moment. Perhaps a request to clarify the question, or an expanded answer to include a direct answer and a "what you might actually need is..." alternative. Anyways, hopefully my fiddle will help users that were in my situation. TY for the XY link – Dustin Graham Apr 29 '13 at 20:39
16

You need to use the css function.

if($("#toshow").css("display") == "block"){

}else{

}
Brian McKenna
  • 45,528
  • 6
  • 61
  • 60
6
$(document).ready(function(){
    if ($('#toshow').css('display') == 'block') {
        // Do something.
    } else {
        // Do something else.
    }
});

Should do the trick.

anomareh
  • 5,294
  • 4
  • 25
  • 22
5

Don't forget your :visible selector.

if ($("#toshow:visible").length) {
  // it's visible
} else {
  // it's not visible
}
Sampson
  • 265,109
  • 74
  • 539
  • 565
0

This option worked perfectly. I am Brazilian and I had to translate the text, but when I saw the code I immediately saw that it was the correct option.

function reversoObjeto() {
  $('#janela').fadeToggle(500, function(e) {
    if ($("#janela").css("display") == "none") {
      alert("Janela Apagou!");
    } else {
      alert("Janela Acendeu!");
    }
  })
}
Xpleria
  • 5,472
  • 5
  • 52
  • 66
Hugo Matos de Souza
  • 1