Differences between display and visibility

Display can usually be set to none, inline, block

Visibility can usually be set to hidden or visible.

When display is none and visibility is hidden, the elements will not be seen. However, there are differences.

Display will hide the element, and the position is no longer occupied, while visibility occupies the original position.

See the example to understand:
Copy codeThe Code is as follows:
<Div id = "myDiv" style = "width: 100px; border: 1px solid # aaa;">
<P>

</P>
</Div>
<Input type = "button" onclick = "isVisibility (document. getElementById ('mydiv ')" value = "visible visibility"/>
<Input type = "button" onclick = "isDisplay (document. getElementById ('mydiv ')" value = "visible display"/>
<Script>
Function isVisibility (me ){
If (me. style. visibility = "hidden "){
Me. style. visibility = "visible ";}
Else {
Me. style. visibility = "hidden ";
}
}

Function isDisplay (me ){
If (me. style. display = "none "){
Me. style. display = "block ";}
Else {
Me. style. display = "none ";
}
}
</Script>