Hide HTML elements through display or visibility

Sometimes we need to control whether HTML elements in a web page are displayed or hidden based on certain conditions. This can be achieved through display or visibility. The following example shows the difference between display and visibility. The simple example code is as follows:

Copy code

The code is as follows:

<html>
<head>
<title>Display and hide control of HTML elements</title>
<script type="text/javascript">
function showAndHidden1(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
if(div1.style.display=='block') div1.style.display='none';
else div1.style.display='block';
if(div2.style.display=='block') div2.style.display='none';
else div2.style.display='block';
}
function showAndHidden2(){
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
if(div3.style.visibility=='visible') div3.style.visibility='hidden';
else div3.style.visibility='visible';
if(div4.style.visibility=='visible') div4.style.visibility='hidden';
else div4.style.visibility='visible';
}
</script>
</head>
<body>
<div>display: The element's position is not occupied</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" onclick="showAndHidden1();" value="DIV switch" />
<hr>
<div>visibility: The element's position is still occupied</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" onclick="showAndHidden2();" value="DIV switch" />
</body>
</html>

<<: Summary of MySQL basic common commands

>>: Life cycle and hook functions in Vue

Deep understanding of the use of ::before/:before and ::after/:after

Hide HTML elements through display or visibility

Deep understanding of the use of ::before/:before and ::after/:after

What are the new features of Apache Spark 2.4, which will be released in 2018?

Practical basic Linux sed command example code

How to upload the jar package to nexus via the web page

Vue network request scheme native network request and js network request library

Optimize MySQL with 3 simple tweaks

Examples of using MySQL pessimistic locking and optimistic locking

Detailed discussion of several methods for deduplicating JavaScript arrays

React example of how to get the value of the input box

Detailed explanation of the default values of width and height in CSS: auto and %

Recommend

Steps to install RocketMQ instance on Linux

How to solve the background tiling and border breaking of CSS style div or li in IE6

React sample code to implement automatic browser refresh

Detailed summary of web form submission methods

What is the use of the enctype field when uploading files?

Nodejs uses readline to prompt for content input example code

Solve the problem of data synchronization when vue-seamless-scroll scrolls and likes

Enable remote access rights for MySQL under Linux and open port 3306 in the firewall

How to configure Linux to use LDAP user authentication

React example of how to get the value of the input box

Hide div in HTML Hide table TABLE or DIV content css style

Example code for implementing complex table headers in html table

Thinking about grid design of web pages

Detailed description of HTML table border control

How to remotely connect to the cloud server database using Navicat