Display and 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>

<<: The benefits of div+css and web standard pages

>>: Vue implements tree table through element tree control

Summary of the unknown usage of "!" in Linux

Display and hide HTML elements through display or visibility

Summary of the unknown usage of "!" in Linux

Tutorial on using prepare, execute and deallocate statements in MySQL

Introduction to commonly used fonts on the Web (fonts supported by iOS and Android browsers)

Implementation of Nginx configuration of multi-port and multi-domain name access

Implementation of Docker data volume operations

vue-admin-template dynamic routing implementation example

mysql 8.0.18 mgr installation and its switching function

Introduction to the use and difference between in and exists in MySQL

Form submission refresh page does not jump source code design

In-depth understanding of HTML form input monitoring

Recommend

How to use border-image to implement text bubble border sample code

Detailed tutorial on installing SonarQube using Docker

InnoDB type MySql restore table structure and data

Let the web page redirect to other pages after opening for a few seconds

Detailed explanation of Redis master-slave replication practice using Docker

How to use Docker to package and deploy images locally

Steps for IDEA to integrate Docker to achieve remote deployment

wget downloads the entire website (whole subdirectory) or a specific directory

Detailed explanation and summary of the URL for database connection

Forever+nginx deployment method example of Node site

Talking about Less and More in Web Design (Picture)

How to query date and time in mysql

Detailed installation process and basic usage of MySQL under Windows

Detailed explanation of the installation steps of the MySQL decompressed version

Differences between FLOW CHART and UI FLOW