Check element CSS display with JavaScript

Question

Is it possible to check if an element's CSS display == block or none using JavaScript?

Aliaksandr Sushkevich · Accepted Answer · 2020-10-06 09:29:40Z

194

As sdleihssirhc says below, if the element's display is being inherited or being specified by a CSS rule, you'll need to get its computed style:

return window.getComputedStyle(element, null).display;

Elements have a style property that will tell you what you want, if the style was declared inline or with JavaScript:

console.log(document.getElementById('someIDThatExists').style.display);

will give you a string value.

edited Oct 6, 2020 at 9:29

Aliaksandr Sushkevich

12.6k8 gold badges41 silver badges46 bronze badges

answered Feb 1, 2011 at 18:06

Dan Davies Brackett

10.1k2 gold badges36 silver badges55 bronze badges

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

8 Comments

jscripter Over a year ago

What if it has not inline css?

cade galt Over a year ago

For simplicity, why not just always get the computed style?

vsync Over a year ago

what is currentStyle? never heard of it, also checked document.body.currentStyle and got nothing (wasn't surprised)

user202729 Over a year ago

@vsync (and for future reference) According to MDN, it's a proprietary property of old version of Internet Explorer.

Dan Davies Brackett Over a year ago

Thanks for the comments. Answer updated for the modern web.

|

daniels · Accepted Answer · 2018-10-18 10:16:43Z

93

If the style was declared inline or with JavaScript, you can just get at the style object:

return element.style.display === 'block';

Otherwise, you'll have to get the computed style, and there are browser inconsistencies. IE uses a simple currentStyle object, but everyone else uses a method:

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

The null was required in Firefox version 3 and below.

edited Oct 18, 2018 at 10:16

daniels

5,2902 gold badges24 silver badges11 bronze badges

answered Feb 1, 2011 at 18:07

sdleihssirhc

42.6k6 gold badges56 silver badges67 bronze badges

7 Comments

Kai Qing Over a year ago

should this not be == in this case?

sdleihssirhc Over a year ago

@Kai The triple equal doesn't do type coercion. Crockford explains why, in the section called "=== and !== Operators."

Kai Qing Over a year ago

That's pretty interesting. Funny how something like this can just escape notice after so many years of programming. I always adopted the suggestion that === was strict boolean. Good to know.

Tim Down Over a year ago

@Kai: There's no problem with using === rather than == here, but equally there's no advantage either. Both operands are guaranteed to be strings, so both operators perform exactly the same steps.

Felipe Alameda A Over a year ago

@hippietrail And almost 10 years later (2019-10-27) there are still problems. Check what MDN reports

|

Ryan Taylor · Accepted Answer · 2017-11-27 21:50:54Z

44

For jQuery, do you mean like this?

$('#object').css('display');

You can check it like this:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

edited Nov 27, 2017 at 21:50

Ryan Taylor

13.7k3 gold badges41 silver badges34 bronze badges

answered Feb 1, 2011 at 18:07

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

3 Comments

zzzzBov Over a year ago

Avoid over-complicating the answer. I know that jQuery is becoming somewhat of a standard, but there's no reason to add an entire framework just to check an element's display style.

Kai Qing Over a year ago

Yeah but I did this because everyone else gave the raw javascript answer, so if he was using jquery but did not specify then there would be some use in the post

user0103 Over a year ago

I know that jQuery is becoming somewhat of a standard What a thing to read!

Martin Jiřička · Accepted Answer · 2017-01-25 22:47:48Z

22

This answer is not exactly what you want, but it might be useful in some cases. If you know the element has some dimensions when displayed, you can also use this:

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

EDIT: Why this might be better than direct check of CSS display property? Because you do not need to check all parent elements. If some parent element has display: none, its children are hidden too but still has element.style.display !== 'none'.

edited Jan 25, 2017 at 22:47

answered Jan 5, 2017 at 22:32

Martin Jiřička

5263 silver badges10 bronze badges

1 Comment

Jonatas Walker Over a year ago

Indeed, this is useful.

Victor · Accepted Answer · 2011-02-01 18:06:43Z

8

yes.

var displayValue = document.getElementById('yourid').style.display;

answered Feb 1, 2011 at 18:06

Victor

4,7311 gold badge28 silver badges31 bronze badges

Comments

bluish · Accepted Answer · 2014-10-20 07:34:23Z

5

Basic JavaScript:

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

edited Oct 20, 2014 at 7:34

bluish

27.5k28 gold badges126 silver badges185 bronze badges

answered Feb 1, 2011 at 18:36

Chugworth

5002 silver badges5 bronze badges

Comments

MarkXA · Accepted Answer · 2011-02-01 18:17:19Z

3

To find out if it's visible with plain JavaScript, check whether the display property is 'none' (don't check for 'block', it could also be blank or 'inline' and still be visible):

var isVisible = (elt.style.display != "none");

If you are using jQuery, you can use this instead:

var isVisible = $elt.is(":visible");

answered Feb 1, 2011 at 18:17

MarkXA

4,40423 silver badges23 bronze badges

Comments

Seega · Accepted Answer · 2022-09-12 09:03:07Z

2

I just found the function element.checkVisibility() which is returning false when display: none is set.

Honestly, I cannot find any documentation for it, so I do not know if it is Chrome specific.

answered Sep 12, 2022 at 9:03

Seega

3,4793 gold badges37 silver badges50 bronze badges

1 Comment

Hashim Aziz Over a year ago

Seems to be supported by everything but Safari, which is about typical.

Marek Tuchalski · Accepted Answer · 2011-02-01 18:08:13Z

1

You can check it with for example jQuery:

$("#elementID").css('display');

It will return string with information about display property of this element.

answered Feb 1, 2011 at 18:08

Marek Tuchalski

4892 silver badges8 bronze badges

Comments

Joyce Babu · Accepted Answer · 2011-02-01 18:08:45Z

0

With pure javascript you can check the style.display property. With jQuery you can use $('#id').css('display')

answered Feb 1, 2011 at 18:08

Joyce Babu

20.9k13 gold badges66 silver badges102 bronze badges

Collectives™ on Stack Overflow

Check element CSS display with JavaScript

10 Answers 10

8 Comments

7 Comments

3 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

8 Comments

7 Comments

3 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related