What is the opposite of the "None display"?

Asked

Viewed 8,175 times

5

Before I did some research on the properties of "display".

I intend to hide some div and used display:None. To show off the div what ownership of display should wear ?

(I am working with Javascript)

javascript css css3

4 answers

7

Actually the display by default (if you do not declare otherwise) depends on the element, in case it is div the display default is block, already for example in an image or span (<img>, <span>) the default display is inline

  • Apart from these, we also have the inline-block and flex :)

  • 1

    @Murilogambôa , is true and even more (https://developer.mozilla.org/en-US/docs/Web/CSS/display), but I think (almost sure) that there are no elements by default that have this display

  • really, no element has by default these displays

4

The opposite of display:none sera display:block

Since it is to be used Javascript, consider also jQuery, can achieve the same result in an easier and more intuitive way as for example:

jQuery(elemento).hide(); /*para esconder [utiliza display:none]*/

jQuery(elemento).show(); /*para mostrar [utiliza display:block]*/

If the jQuery, consider using CSS along with Javascript as follows:

In the file CSS

.hide{
   display:none;
}
.show{
   display:block;
}

In the Javascript

var elemento = document.getElementById(ID_DO_ELEMENTO);
//esconder
elemento.className="hide";
//mostrar
elemento.className=elemento.className.replace('hide', 'show');
//ou simplesmente removento do 'hide'
elemento.className=elemento.className.replace('hide', '');
  • 3

    Depends, the element span or a li has as a standard the display: inline and not a display: block, this can also be changed in CSS, see here about this.

  • Well viewed @Inkeliz. However, the author of the question specifies that the element in question is div. Soon excused to be explaining all about CSS

4

According to this answer in SO-EN display: none does not have an opposite as visibility:hidden(opposite visibility: visible).

The display property, however, decides which Layout rules an element will follow. There are several different types of rules of how elements will be displayed in CSS, so there are several different values(block, inline, inline-block, etc - Documentation).

Display:none Removes an element of the page layout entirely, as if it were not there.

All other values for display cause in the element to be a part of the page, in this sense all are opposite to display:none,but there is a value that is the direct inverse of display:none.

3

Depends on what the initial value. According to MDN the initial value if nothing has been applied to the element is inline. But this does not apply to all elements. There is a interesting article about elements that create a block in the layout and others that are inline, are inserted into the line in question without breaking the layout or creating a space of their own.

<div>, <article>, <p>, <h...> are some of the elements that generate their own layout block. You can see the complete list here. These elements have the initial value of block.

<a>, <span>, <img> are some of the elements that nay generate their own layout block. You can see the complete list here. These elements have the initial value of inline.

You can also read the value (if it has been closed by CSS or directly in the style of the element), so you can save this value and reset it later:

var inicial = window.getComputedStyle(el).style;

Browser other questions tagged javascript css css3

You are not signed in. Login or sign up in order to post.