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

Summary of MySQL lock related knowledge

How to effectively compress images using JS

mysql add, delete, modify and query basic statements

Detailed explanation of the use of bus in Vue

In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle

How to parse the attribute interface of adding file system in Linux or Android

How to implement simple data monitoring with JS

Summary of various forms of applying CSS styles in web pages

Implementation of one-click TLS encryption for docker remote api

Detailed example of how to implement transaction commit and rollback in mysql

Recommend

Detailed explanation of the use of Echart charts in the front-end and back-end of the project

border-radius is a method for adding rounded borders to elements

Tutorial on building file sharing service Samba under CentOS6.5

Bootstrap 3.0 study notes buttons and drop-down menus

How to integrate the graphic verification code component into the Ant Design Pro login function

WeChat applet calculator example

5 tips for writing CSS to make your style more standardized

Native js to realize bouncing ball

How to monitor oracle database using zabbix agent2

How to insert Emoji expressions into MySQL

Solution to multiple 302 responses in nginx proxy (nginx Follow 302)

The difference between this.$router and this.$route in Vue and the push() method

Analysis of SQL integrity constraint statements in database

Docker packages the local image and restores it to other machines

CSS3 uses animation attributes to achieve cool effects (recommended)