Method 2: Hide controls using JavaScript

The Helper House (www.bkjia.com) Tutorial uses JavaScript to hide controls in two ways, namely by setting 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.

Reference content is as follows: <P> <Input id = 'control' value = "control to be hidden"> </P> <P>

Hide the above control and make it not occupy the location on the page

Reference content is as follows: <Input type = "button" value = 'hide onclick = 'displayhide _ control () '> <Input type = "button" value = 'display 'onclick = 'displayshow _ control ()'> <Br/>

Only hide the control, its position is still occupied

Reference content is as follows: <Input type = "button" value = 'hide onclick = 'visibilityhide _ control () '> <Input type = "button" value = 'display 'onclick = 'visibilityshow _ control () '> </P> <Script language = "javascript" type = "text/javascript"> Function displayHide_control () { Var _ control = document. getElementById ("control "); _ Control. style. display = "none "; } Function displayShow_control () { Var _ control = document. getElementById ("control "); _ Control. style. display = "block "; } Function visibilityHide_control () { Var _ control = document. getElementById ("control "); _ Control. style. visibility = "hidden "; } Function visibilityShow_control () { Var _ control = document. getElementById ("control "); _ Control. style. visibility = "visible "; } </Script>