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

Hide HTML elements through display or visibility

jQuery implements breathing carousel

mysql 5.7.19 latest binary installation

Linux sftp command usage

A brief discussion on how Tomcat breaks the parent delegation mechanism

JavaScript function syntax explained

Add ?v= version number after js or css to prevent browser caching

CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox

How to use JS WebSocket to implement simple chat

Usage of HTML H title tag

Windows cannot start MySQL service and reports error 1067 solution

Recommend

W3C Tutorial (5): W3C XML Activities

Use of Linux dynamic link library

HTML Tutorial: Ordered Lists

Essential for front-end development: 12 browser compatibility testing tools recommended

Record the steps of using mqtt server to realize instant communication in vue

MySQL sql_mode analysis and setting explanation

Detailed explanation of dragging table columns using Vue Element Sortablejs

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

How to create a new user in CentOS and enable key login

Vue implements the right slide-out layer animation

Tutorial on migrating mysql from phpstudy to Linux

How to use limit_req_zone in Nginx to limit the access to the same IP

Differences between MySQL MyISAM and InnoDB

Vue uses echart to customize labels and colors

JavaScript imitates the complete page implementation process of Xiaomi Mall official website