Before doing some research on the properties of the display.
I want to hide some div and used display: none . To re-display the div display property should I use?
(I'm working with Javascript)
What is the opposite of "display none"?
5
asked by anonymous 26.01.2017 / 10:16
4 answers
7
3
The opposite of display:none will display:block
Since you are using Javascript , also consider jQuery , you can achieve the same result in a more intuitive and easy way:
jQuery(elemento).hide(); /*para esconder [utiliza display:none]*/
jQuery(elemento).show(); /*para mostrar [utiliza display:block]*/
If jQuery is not allowed, consider using CSS together with Javascript as follows:
In the CSS
.hide{
display:none;
}
.show{
display:block;
}
No 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', '');
26.01.2017 / 10:29
3
Depends on 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's an interesting article about elements that create a block in the layout and others that are < in> inline , they insert themselves in the line in question without breaking the layout or creating their own space.
<div>, <article>, <p>, <h...> are some of the elements that generate your own layout block. You can view complete list here . These elements have the initial value of block .
<a>, <span>, <img> are some of the elements that generate your own layout block. You can check out complete list here . These elements have the initial value of inline .
You can also read the value (if it has been defined by CSS or directly in the style of the element), so you can save this value and then reset it:
var inicial = window.getComputedStyle(el).style;
26.01.2017 / 10:55
3
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 what Layout rules an element will follow. There are several different types of rules for how elements will be displayed in CSS , so there are several different values (block, inline, inline-block, etc - Documentation ).
Display:none Removes an element from the page layout entirely, as if it were not there.
All other values for display cause the element to be a part of the page, in this sense all are opposed to display:none, but there is no value that is the direct inverse of display:none.
26.01.2017 / 12:46