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

How to use worm replication in Mysql data table

Display and hide HTML elements through display or visibility

How to use worm replication in Mysql data table

How to use docker-compsoe to deploy a project with front-end and back-end separation

How to add fields to a large data table in MySQL

WeChat applet implements sorting function based on date and time

MySQL database JDBC programming (Java connects to MySQL)

Radio buttons and multiple-choice buttons are styled using images

Example of how to implement embedded table with vue+elementUI

Mysql implements regular clearing of old data in a table and retaining several pieces of data (recommended)

How to install docker under centos and remotely publish docker in springboot

Vue project packaging and optimization implementation steps

Recommend

How to clear the validation prompt in element form validation

Install Python 3.6 on Linux and avoid pitfalls

Tutorial on installing and changing the root password of MySQL 5.7.20 decompressed version

Axios secondary encapsulation example Demo in the project

How to use geoip to restrict regions in nginx

Several ways to connect tables in MySQL

Solution to the problem of not being able to access the home page when adding a tomcat container to Docker

Summary of Mysql slow query operations

Alibaba Cloud Server Ubuntu Configuration Tutorial

Vue Element front-end application development preparation for the development environment

How to show or hide common icons on the desktop in Windows Server 2012

Tutorial diagram of installing mysql8.0.18 under linux (Centos7)

HTML+CSS+JS realizes the scrolling gradient effect of the navigation bar

Discuss the development trend of Baidu Encyclopedia UI

HTML Tutorial: Collection of commonly used HTML tags (5)