Conditional CSS based on display?

Question

Is it possible to conditionally add a class to an element based on its display property (eg. display: block, display: none) in JavaScript?

I'm guessing it would look something like this:

.addClass($invoiceTable.display=block ? "firstClass" : "secondClass");

where firstClass is added if invoiceTable has style="display: block", else the secondClass is added.

`$invoiceTable.display=block` well that is not a comparison. So look at the display property or getComputedStyle — epascarello, Aug 24 '21 at 17:17
Also, you're checking the `style` property so, assuming `$invoiceTable` is an `HTMLElement`, `$invoiceTable.style.display === 'block'`. — Heretic Monkey, Aug 24 '21 at 17:18
This seems like a backwards way to do it. Usually the style comes from the class, not the other way around. — Barmar, Aug 24 '21 at 17:19
The `style` property of an element only contains its inline styles, not styles inherited from CSS. Use `getComputedStyle()` to get its actual style. — Barmar, Aug 24 '21 at 17:20
@Barmar Interestingly, that's what the duplicate question's answers say too.... huh. :P — Heretic Monkey, Aug 24 '21 at 17:23

Ritesh Waghela · Answer 1 · 2021-08-24T17:33:04.513

0

One way to achieve this would be to store the style attribute of that element to a variable and check if is display or block and based on that you can add class.

Something like this:

const display =  document.getElementById("invoiceTable").style.display; // Inline style

or, if the display property is an inherited property:

  const display =   window.getComputedStyle(document.getElementById("invoiceTable"), null).display;

and then add your classes based on display:

display === 'block' ? element.classList.add("block") : element.classList.add("other");

edited Aug 24 '21 at 17:33

answered Aug 24 '21 at 17:19

Ritesh Waghela

3,474
2
19
25

Why do you have the `addClass` calls in quotes? That won't add the classes. – Barmar Aug 24 '21 at 17:20
That is just the pseudo code. Refer my last line. – Ritesh Waghela Aug 24 '21 at 17:22
Why post pseudo-code instead of actual code? – Barmar Aug 24 '21 at 17:22
Refer the OP's question, he is interested in knowing if styles can be applied based on condition, moreover he has also not provided complete addClass details, like on what element he want;s to apply the style on. – Ritesh Waghela Aug 24 '21 at 17:24
@Barmar I have updated my answer based on your suggestion. – Ritesh Waghela Aug 24 '21 at 17:37

Conditional CSS based on display?

1 Answers1