Home > Developer > Web Develop
HTML element display and hiding, HTML element display and hiding
In WEB development, elements often need to be hidden and displayed in front-end HTML. The most common is the second-level navigation bar (which triggers onmouseover by moving the mouse, the onmouseout event is used to display and hide the level-2 menu.) The level-2 menu is displayed and hidden.
However, there are two ways to influence and display the control elements:
1. display: Set how and whether to display an element.
2. visibility: sets whether the element is visible or invisible.
<Html> Result:
Summary:Display and visibility can hide and display elements at the same time. The difference is that the visibility attribute hides html elements, but its elements (even hidden state) are exclusive, the display attribute does not operate on html elements. The display attribute operates on the element type inline, block, or none, which is directly related to the element size and existence or not.
I used display and visibility before:
When the second-level navigation menu is written and displayed to display and hide the second-level menu, it is found that the first access is made after the first access or refresh, when you move the cursor to a level-1 menu, the level-2 sub-menu cannot be refreshed. visibility will not cause problems like this.
How to use javascript to hide html elements and hide them when the page is initially loaded?1. Compile js Functions
<Script type = "text/javascript">
Function display (y) {$ (y). style. display = ($ (y). style. display = "none ")? "": "None ";}
Function $ (s) {return document. getElementById (s );}
</Script>
2. Add the id attribute to the html element to be displayed/hidden
<Table>
<Tr id = "menu">
<Td> control the display/hide of this tr </td>
</Tr>
</Table>
3. Add buttons and links to trigger js functions.
<Input type = "button" onclick = "display ('menu ')" value = "show/hide"/>
<A href = "#" onclick = "display ('menu ')"> display/hide </a>
Javascript hide layer <div id = "layer" style = "display: none;"> advertisement </div>
<Input type = "botton" onclick = "display (layer)">
2. Two methods to hide and display page controls using javascript
Javascript controls the hidden display of page controls. The difference between the two methods is whether the controls are still occupied on the page after they are hidden.
Method 1:
Document. all ["PanelSMS"]. style. visibility = "hidden ";
Document. all ["PanelSMS"]. style. visibility = "visible ";
Method 2:
Document. all ["PanelSMS"]. style. display = "none ";
Document. all ["PanelSMS"]. style. display = "inline ";
Method 1 after hiding, the page location is still occupied by the control but not displayed.
Method 2 Hide and the page location is not occupied
How can I hide html elements when they are loaded?Element. style cannot be used to obtain the current budget. It is only used to assign values. Therefore, document. getElementById (e). style. display does not return the display value of the current element correctly. Therefore, if the display attribute is none, the function becomes invalid.
Use currentStyle or getComputedStyle (supported by IE and Firefox respectively) to obtain the style object of the element, for example:
Var o = document. getElementById (e), currentStyle; currentStyle = o. currentStyle! = Null? O. currentStyle: getComputedStyle (o, false); then the display value is obtained as follows:
Switch (currentStyle. display ){...}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
