Home  >  Article  >  Web Front-end  >  How to show and hide Html elements

How to show and hide Html elements

coldplay.xixi
coldplay.xixiOriginal
2021-04-26 10:23:106029browse

Methods to display and hide Html elements: 1. The visibility of the div can control the display and hiding of the div, but the page will appear blank after hiding; 2. By setting the display attribute, the occupied page space can be released after the div is hidden.

How to show and hide Html elements

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

Methods to display and hide Html elements:

1. The visibility of div can control the display and hiding of div, but the page will appear blank after hiding:

  style="visibility: none;"
 
  document.getElementById("typediv1").style.visibility="hidden";//隐藏
 
  document.getElementById("typediv1").style.visibility="visible";//显示
 
    $("#divid").css("vicibility","hidden")
 
    $("#divid").css("vicibility","visible")

2. By setting the display attribute, you can hide the div and release the occupied page space, as follows

 style="display: none;"
 
  document.getElementById("typediv1").style.display="none";//隐藏
 
  document.getElementById("typediv1").style.display="";//显
 
    $("#divid").css("display","none");
 
    $("#divid").css("display","");

Related learning recommendations:html video tutorial

The above is the detailed content of How to show and hide Html elements. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn