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 disappear. But there are differences.
Display hides the element and the position is no longer occupied, while visibility occupies the original position.
Just look at the example to understand:
The code copy is as follows:
<div id="myDiv">
<p>
</p>
</div>
<input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="Is visibility visible" />
<input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="Is it visible to 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>