Hide HTML elements through display or visibility

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

Recommend

How to use nginx to simulate blue-green deployment

This article introduces blue-green deployment and...

Solve the problem that the default value of CSS3 transition-delay attribute is 0 without unit and it is invalid

Today I would like to share with you the CSS3 tra...

HTML drawing user registration page

This article shares the specific implementation c...

MySQL learning notes: complete select statement usage example detailed explanation

This article uses an example to illustrate the co...

How to use mysqldump to backup MySQL data

1. Introduction to mysqldump mysqldump is a logic...

Implementing Priority Queue in JavaScript

Table of contents 1. Introduction to priority que...

WeChat applet realizes chat room function

This article shares the specific code of WeChat a...

Solution to the bug that IE6 select cannot be covered by div

Use div to create a mask or simulate a pop-up wind...

Mysql keeps the existing content and adds content later

This command modifies the data table ff_vod and a...

Use of Linux usermod command

1. Command Introduction The usermod (user modify)...

Detailed explanation of the implementation of MySQL auto-increment primary key

Table of contents 1. Where is the self-incremente...

Use of Linux tr command

1. Introduction tr is used to convert or delete a...

How to solve the problem of ping being successful but the port being unavailable in Linux

Description of port availability detection when p...

In-depth understanding of JavaScript callback functions

Table of contents Preface Quick Review: JavaScrip...

How to use the markdown editor component in Vue3

Table of contents Install Importing components Ba...