Check element CSS display with JavaScript

Question

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

score 171 · Accepted Answer · edited Oct 06 '20 at 09:29

171

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 06 '20 at 09:29

Aliaksandr Sushkevich

11,550
7
37
44

answered Feb 01 '11 at 18:06

Dan Davies Brackett

9,811
2
32
54

3

What if it has not inline css? – jscripter Nov 10 '14 at 19:10
7

For simplicity, why not just always get the computed style? – cade galt Dec 29 '15 at 18:55
12

what is `currentStyle`? never heard of it, also checked `document.body.currentStyle` and got nothing (wasn't surprised) – vsync Oct 29 '16 at 16:36
2

@vsync (and for future reference) [According to MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/currentStyle), it's a proprietary property of old version of Internet Explorer. – user202729 Nov 19 '18 at 10:45
4

Thanks for the comments. Answer updated for the modern web. – Dan Davies Brackett Nov 30 '18 at 13:43
its giving a null string in my case – Zeeshan Ahmad Khalil Apr 30 '19 at 13:55
Also this is MDN Reference for the [getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method – Stano Sep 04 '20 at 19:08

score 89 · Answer 2 · edited Oct 18 '18 at 10:16

89

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 '18 at 10:16

daniels

4,961
2
22
11

answered Feb 01 '11 at 18:07

sdleihssirhc

42,000
6
53
67

should this not be == in this case? – Kai Qing Feb 01 '11 at 18:08
@Kai The triple equal doesn't do type coercion. [Crockford explains why](http://javascript.crockford.com/code.html), in the section called "`===` and `!==` Operators." – sdleihssirhc Feb 01 '11 at 18:15
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. – Kai Qing Feb 01 '11 at 18:23
4

@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. – Tim Down Feb 01 '11 at 18:38
It looks like getComputedStyle is supported from IE 9 onwards - http://caniuse.com/getcomputedstyle – Derek Ekins Aug 05 '14 at 09:10
Five and a half years after this answer was posted, are there still browser inconsistencies we need to worry about? – hippietrail Jun 04 '16 at 06:46
1

@hippietrail And almost 10 years later (2019-10-27) there are still problems. Check [what MDN reports](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) – Felipe Alameda A Oct 28 '19 at 03:11

score 44 · Answer 3 · edited Nov 27 '17 at 21:50

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 '17 at 21:50

Ryan Taylor

12,559
2
39
34

answered Feb 01 '11 at 18:07

Kai Qing

18,793
5
39
57

10

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. – zzzzBov Feb 01 '11 at 18:09
19

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 – Kai Qing Feb 01 '11 at 18:11

Martin Jiřička · Answer 4 · 2017-01-25T22:47:48.947

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 '17 at 22:47

answered Jan 05 '17 at 22:32

Martin Jiřička

518
3
9

Indeed, this is useful. – Jonatas Walker Jan 24 '17 at 12:36

score 8 · Answer 5 · answered Feb 01 '11 at 18:06

8

yes.

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

answered Feb 01 '11 at 18:06

Victor

4,721
1
26
31

score 5 · Answer 6 · edited Oct 20 '14 at 07:34

5

Basic JavaScript:

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

edited Oct 20 '14 at 07:34

bluish

26,356
27
122
180

answered Feb 01 '11 at 18:36

Chugworth

480
2
5

score 3 · Answer 7 · answered Feb 01 '11 at 18:17

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");

score 1 · Answer 8 · answered Feb 01 '11 at 18:08

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 01 '11 at 18:08

Marek Tuchalski

489
2
8

score 1 · Answer 9 · answered Sep 12 '22 at 09:03

1

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 '22 at 09:03

Seega

3,001
2
34
48

1

Seems to be supported by [everything but Safari](https://caniuse.com/mdn-api_element_checkvisibility), which is about typical. – Hashim Aziz Jun 06 '23 at 23:50

score 0 · Answer 10 · answered Feb 01 '11 at 18:08

0

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

answered Feb 01 '11 at 18:08

Joyce Babu

19,602
13
62
97

Check element CSS display with JavaScript

10 Answers10

Linked

Related