Check element CSS display with JavaScript

Question

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

User · Answer

With pure javascript you can check the style display property  With jQuery you can use     id   css  display

User · Answer

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

User · Answer

yes   var displayValue   document getElementById  yourid   style display

User · Answer

Basic JavaScript   if  document getElementById  elementId   style display     block        alert  this Element is block

User · Answer

You can check it with for example jQuery       elementID   css  display      It will return string with information about display property of this element

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  amp  amp  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

[javascript] Check element CSS display with JavaScript

Examples related to javascript

Examples related to css