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
Recommend
How to implement ansible automated installation and configuration of httpd in Linux system
1. Use ansible's playbook to automatically in...
How to install yum source and upload and download commands rz and sz under CentOS7 (with pictures)
** Detailed graphic instructions for installing y...
How to find and delete duplicate rows in MySQL
Table of contents 1. How to find duplicate rows 2...
Summary of MySQL injection bypass filtering techniques
First, let’s look at the GIF operation: Case 1: S...
Three steps to solve the IE address bar ICON display problem
<br />This web page production skills tutori...
Simple summary of tomcat performance optimization methods
Tomcat itself optimization Tomcat Memory Optimiza...
Summary of common operation skills of MySQL database
This article summarizes common operating techniqu...
Detailed graphic explanation of installing MySQL database and configuring Java project on Linux
1. Install MySQL database ① Download and unzip an...
Share 5 JS high-order functions
Table of contents 1. Introduction 2. Recursion 3....
Encapsulation method of Vue breadcrumbs component
Vue encapsulates the breadcrumb component for you...
CSS3 realizes various graphic effects of small arrows
It’s great to use CSS to realize various graphics...
Summary of the understanding of virtual DOM in Vue
It is essentially a common js object used to desc...
Summarize the problems encountered in using Vue Element UI
Table of contents 1. DateTimePicker date selectio...
Tutorial on compiling and installing MySQL 5.7.17 from source code on Mac
1. Download and unzip to: /Users/xiechunping/Soft...