What is the opposite of display = 'none' in JS

Question

I am making a web page with loading on load-on so when the loading times out and the <div> shows. But I am having a bit of trouble with the .style.display = 'visible' and I cannot find anything on the opposite of display = 'none'. So I am just wondering what is the opposite of 'none' in JS

Answer 1

The answer James posted above is good and I just wanted to elaborate on the values for the display property.

The main values applicable to almost all elements for their display property are block/ inline (there is a small exception like table specific properties).

Certain HTML elements are meant to be rendered on the page as block level elements (think of <div>, <p>, <h1> etc), while other elements are naturally meant to sit along-side other elements (think of <span> <img> etc). Another way of thinking for me is that block level are vertical positioned & inline is horizontal.

So, coming round to the answer, the opposite of display: none can be either display: block / display: inline, depending upon the element. I would categorise block & inline as more of opposite of each other in the layout system. However, that may be thinking in a different context.

Answer 2

If you are just trying to hide the the loading thing, you use use visibility: visible and visibility: hidden

Answer 3

If you're using javascript to set the style, the easiest solution is to set an empty display property (.style.display = '';) to undo the hiding:

const text = document.getElementById('text-element');

function hide() {
  text.style.display = 'none';
}

function show() {
  text.style.display = '';
}

div {
  height: 30px;
}

<div>
  <span id="text-element">Text</span>
</div>

<div>
  <button onclick="hide()">
    Hide Text
  </button>

  <button onclick="show()">
    Show Text
  </button>
</div>

Answer 4

If you want to retain the styling of the element, you could use .style.display=""

Using ="block" or ="inline" will disrupt your current style.

Answer 5

I would say it depends on which container you are using, it is like saying 'what is the opposite of an invisible living creature.'

Default display types for html elements

The opposite of display: none; for elements like <div> <p> <h1> <h2> ... I would say is display: block;.

But then for elements like <a> <img> <span> I would say the opposite would be display: inline;

Answer 6

There is no "display: visible"

in Jquery you can use .show() and .hide() but in pure vanilla it's understood that any other kind of display besides "none" will show the DOM element.

ej. display: block, grid, flex, inline, etc.

Answer 7

In JavaScript you can use most of display properties that are available in CSS. Opposite to display="none"

are all the rest of display properties and are used in different situations.

My favorites are:

display:table;

combined with margin: auto; it aligns child element to the centre very well in most of the situations.

display: inline;

Displays an element as an inline element like div. Any height and width properties will have no effect

display:contents

Makes the container disappear, making the child elements children of the element the next level up in the DOM