Why does assigning `'initial'` for the `display` value not work for list items?

Question

In order to toggle elements between displayed state and hidden state, I created a function that takes an object and a boolean, and assigns either 'none' or 'initial' for the display property of the given object depending on the boolean value.

This seemed to work for most elements like <div> , but for <li> items, assigning 'initial' seems to erase the bullet, and it seems that particularly 'list-item' (or 'grid' ) has to be assigned.

Why does 'initial' not work for <li> , and how can I switch the objects between displayed and hidden states without having to mention the particular object type? I do not want to mention particular values in this function like 'block' , 'inline' , depending on the type of the object.

Answer 1

Use

element.style.display = "";

which means removing the inline style from the element.

Answer 2

Why does assigning 'initial' for the display value not work for list items?

There's nothing special about list items over here. If you apply display:initial to any element be it a <li> a <div> or anything else - the result will be equivalent to applying display:inline to that element because the initial value of the CSS display property is inline

From MDN on the display property :

Initial value: inline

Take a look at this codepen demo - Notice that if you hover over the content, all the <div> elements 'shrink' and become 'inline' even though they are being set with display:initial

How can I switch the objects between displayed and hidden states without having to mention the particular object type?

You could simply toggle a class which when added - sets that element with display:none