Jquery - How to get the style display attribute "none / block"

Question

Is there a way to get the style: display attribute which would have either none or block?

DIV :

<div id="ctl00_MainContentAreaPlaceHolder_cellPhone_input_msg_container" class="Error cellphone" style="display: block;">

     <p class="cellphone" style="display: block;">Text</p>

</div>

I know that there is a way to find out if the DIV is hidden or not but in my case this div is dynamically injected so it always shows up as visible false thus I cannot use that :

$j('.Error .cellphone').is(':hidden')

I am able to get the result "display:block" using :

$j('div.contextualError.ckgcellphone').attr('style')

Is there a way to get just the value "block" or "none" or is there a better/more efficient way to do this?

gnarf · Accepted Answer · 2009-12-09 17:16:36Z

135

You could try:

$j('div.contextualError.ckgcellphone').css('display')

answered Dec 9, 2009 at 17:16

gnarf

107k26 gold badges129 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

raphie · Accepted Answer · 2011-07-13 19:37:19Z

84

If you're using jquery 1.6.2 you only need to code

$('#theid').css('display')

for example:

if($('#theid').css('display') == 'none'){ 
   $('#theid').show('slow'); 
} else { 
   $('#theid').hide('slow'); 
}

answered Jul 13, 2011 at 19:37

raphie

3,3052 gold badges32 silver badges30 bronze badges

Comments

Martijn Pieters · Accepted Answer · 2012-05-23 22:40:56Z

36

this is the correct answer

$('#theid').css('display') == 'none'

You can also use following line to find if it is display block or none

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

edited May 23, 2012 at 22:40

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered May 23, 2012 at 11:23

Seetpal Singh

3693 silver badges3 bronze badges

2 Comments

user1108579 Over a year ago

Since you're attempting to do an equality check, shouldn't you be using '===' instead of '=='?

xecute Over a year ago

Checking with .css("display") and .is(":visible") are not the same things. If parent element has "display: none", they will give different results. Be careful.

josliber · Accepted Answer · 2015-09-04 16:21:24Z

4

My answer

/**
 * Display form to reply comment
 */
function displayReplyForm(commentId) {
    var replyForm = $('#reply-form-' + commentId);
    if (replyForm.css('display') == 'block') { // Current display
        replyForm.css('display', 'none');
    } else { // Hide reply form
        replyForm.css('display', 'block');
    }
}

edited Sep 4, 2015 at 16:21

josliber

44.4k12 gold badges103 silver badges136 bronze badges

answered Sep 4, 2015 at 16:13

user2487028

411 bronze badge

Comments

byrop · Accepted Answer · 2018-01-11 16:39:36Z

2

//animated show/hide

function showHide(id) {
      var hidden= ("none" == $( "#".concat(id) ).css("display"));
      if(hidden){
          $( "#".concat(id) ).show(1000);
      }else{
          $("#".concat(id) ).hide(1000);
      }
  }

answered Jan 11, 2018 at 16:39

byrop

211 bronze badge

Collectives™ on Stack Overflow

Jquery - How to get the style display attribute "none / block"

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related