Js will control the use of hidden and display properties

There are two ways to hide a control in JavaScript, by setting the "display" and "visibility" properties of the control's style. When style.display="block" or style.visibility="visible", when style.display="none" or style.visibility="hidden", the control is not visible. The difference is that "display" not only hides the control, but the hidden control no longer occupies the position occupied by the display, while "visibility" hides the control only by making the control invisible, and the control still occupies its original position.

 
function displayHideUI() 
{ 
var ui = document.getElementById("bbs"); 
ui.style.display="none"; 
} 
function displayShowUI() 
{ 
var ui = document.getElementById("bbs"); 
ui.style.display=" ";//Display will work fine if it's empty, and a block will wrap the space behind it
} 

function visibilityHideUI() 
{ 
var ui = document.getElementById("bbs"); 
ui.style.visibility="hidden"; 
} 
function visibilityShowUI() 
{ 
var ui = document.getElementById("bbs"); 
ui.style.visibility="visible"; 
} 
</script> 

Value description
None this element is not displayed.
The block element is displayed as a block-level element, followed by a newline character.
The inline default. This element is displayed as an inline element with no line breaks before or after the element.
Inline -block inline block element. (new value of CSS2.1)
List-item this element is displayed as a list.
This element is displayed as a block-level element or as an inline element, depending on the context.
The value compact is available in compact CSS, but has been removed from CSS2.1 due to lack of widespread support.
There is a value marker in marker CSS, but it has been removed from CSS2.1 due to lack of widespread support.
Table this element is displayed as a block-level table (similar to < Table>) , with a newline before and after the table.
Inline-table this element is displayed as an inline table (similar to < Table>) , there is no line break before or after the table.
Table-row-group this element is displayed as a group of one or more rows (similar to < Tbody>) .
Table-header-group this element is displayed as a group of one or more rows (similar to < Thead>) .
Table-footer-group this element is displayed as a group of one or more rows (similar to < Tfoot>) .
Table -row this element is displayed as a table row (similar to < Tr>) .
This element is displayed as a group of one or more columns (similar to < Colgroup>) .
Table -column this element is displayed as a cell column (similar to < Col>)
Table -cell this element is displayed as a table cell (similar to < Td> And < Th>)
Table -caption this element will be displayed as a table title (similar to < Caption>)

Inherit specifies that you should inherit the value of the display property from the parent.