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

Display and hide HTML elements through display or visibility

CSS uses BEM naming convention practice

Configure Java development environment in Ubuntu 20.04 LTS

How to install and configure SSH service in Ubuntu 18.04

MySQL error: Deadlock found when trying to get lock; try restarting transaction solution

JS code to achieve page switching effect

How to use wangEditor in vue and how to get focus by echoing data

mysql 8.0.19 win10 quick installation tutorial

Detailed explanation of several ways to export data in Mysql

A brief discussion on several ways to pass parameters in react routing

Tutorial on using the hyperlink tag in HTML

Recommend

How to prevent the scroll bar from affecting the page width when the scroll bar appears on the page

MySQL Community Server compressed package installation and configuration method

Four data type judgment methods in JS

Website Building Tutorial for Beginners: Learn to Build a Website in Ten Days

Steps to initialize the password after the first successful installation of MySQL

CSS achieves the effect of hiding the scroll bar and scrolling the content (three ways)

Perfect solution to Google Chrome autofill problem

Complete steps for uninstalling MySQL database

Should nullable fields in MySQL be set to NULL or NOT NULL?

The difference between ID and Name attributes of HTML elements

MySQL startup error 1067 and invalid recovery after changing character set and restarting

Detailed Linux installation tutorial

MySQL 5.7.19 winx64 free installation version configuration tutorial

Introduction to the visual expression of the core content of web pages (picture and text)

Summary of the difference between using from and join to query two tables in MySQL