This article mainly introduces how to hide controls and display attributes in JavaScript. If you need them, you can refer to the following two methods to hide controls in JavaScript, you can set the "display" and "visibility" attributes of the style of the control. When style. display = "block" or style. visibility = "visible" when the Controller or see, when style. display = "none" or style. visibility = "hidden" when the controller is invisible. The difference is that "display" not only hides the control, but hidden controls no longer occupy the position occupied by the display. The "visibility" hidden control only sets the control to invisible, the widget still occupies the original position.
The Code is as follows:
Function displayHideUI ()
{
Var ui = document. getElementById ("bbs ");
Ui. style. display = "none ";
}
Function displayShowUI ()
{
Var ui = document. getElementById ("bbs ");
Ui. style. display = ""; // If the display is empty, it will be easy to use.
}
Function visibilityHideUI ()
{
Var ui = document. getElementById ("bbs ");
Ui. style. visibility = "hidden ";
}
Function visibilityShowUI ()
{
Var ui = document. getElementById ("bbs ");
Ui. style. visibility = "visible ";
}
Script
Display:
Value description
None this element is not displayed.
Block: This element is displayed as a block-level element with a line break before and after it.
Inline default. This element is displayed as an inline element, and there is no line break before and after the element.
Inline-block the block element in the row. (Newly added value of CSS2.1)
List-item this element is displayed as a list.
Run-in this element is displayed as a block-level element or Inline element based on the context.
Compact CSS has the value compact, but it has been deleted from CSS2.1 due to lack of extensive support.
Marker CSS has a value of marker, but it has been deleted from CSS2.1 due to lack of extensive support.
Table this element is displayed as a block-Level table (similar
). The table is preceded by a line break.Inline-table this element is displayed as an inline table (similar
), There is no line break before and after the table.Table-row-group: This element is displayed as a group of one or more rows (similar
).Table-header-group: This element is displayed as a group of one or more rows (similar
).Table-footer-group: This element is displayed as a group of one or more rows (similar
).Table-row: This element is displayed as a table row (similar
).Table-column-group: This element is displayed as a group of one or more columns (similar
).Table-column: This element is displayed as a cell column (similar
)Table-cell: This element is displayed as a table cell (similar
| And |
)
Table-caption this element is displayed as a table title (similar |
)
Inherit specifies that the value of the display attribute should be inherited from the parent element.
