The method that JS controls to hide and introduction of display attribute

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

Copy Code code as follows:


function Displayhideui ()


{


var ui = document.getElementById ("BBS");


ui.style.display= "None";


}


function Displayshowui ()


{


var ui = document.getElementById ("BBS");


ui.style.display= "";//display empty words will work, for block will change the space behind the line


}


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 will not be displayed.


Block This element will be displayed as a blocks-level element with a newline character before and after this element.


inline Default. This element is displayed as an inline element with no line breaks before and after the element.


Inline-block block element in the row. (CSS2.1 new value)


List-item This element is displayed as a list.


run-in this element is displayed according to the context as a block-level element or inline element.

The
compact CSS has a value compact, but has been removed from CSS2.1 due to a lack of extensive support.


marker CSS has value marker, but has been removed from CSS2.1 due to a lack of extensive support.


table This element is displayed as a block-level table (similar to <table>) with line breaks before and after the table.


inline-table This element is displayed as an inline table (similar to <table>), with no line breaks before and after the table.


Table-row-group This element is displayed as a grouping of one or more rows (similar to <tbody>).


Table-header-group This element is displayed as a grouping of one or more rows (similar to <thead>).


Table-footer-group This element is displayed as a grouping of one or more rows (similar to <tfoot>).


Table-row This element is displayed as a table row (similar to <tr>).


Table-column-group This element is displayed as a grouping of one or more columns (similar to <colgroup>).


Table-column This element is displayed as a cell-columns (similar to <col>)


Table-cell This element is displayed as a table cell (similar to <td> and <th>)


Table-caption This element is displayed as a table caption (similar to <caption>)


inherit specify that the display property's value should be inherited from the parent element.