Home >Web Front-end >HTML Tutorial >How to control the display and hiding of elements in html
How to control the display and hiding of elements in html
- coldplay.xixiOriginal
- 2021-03-04 13:44:2811642browse
html Methods to control the display and hiding of elements: 1. Use the display method to hide, the code is [div1.style.display='none']; 2. Use the visibility method to display, the code is [div3.style. visibility='hidden'].
The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.
htmlMethods to control the display and hiding of elements:
Sometimes we need to control whether the HTML elements in the Web page are displayed or hidden based on certain conditions. You can use display Or visibility to achieve. Learn the difference between display and visibility through the following example. The simple example code is as follows:
<html>
<head>
<title>HTML元素的显示与隐藏控制</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：元素的位置不被占用</div>
<div id="div1" style="display:block;">DIV 1</div>
<div id="div2" style="display:none;">DIV 2</div>
<input type="button" οnclick="showAndHidden1();" value="DIV切换" />
<hr>
<div>visibility：元素的位置仍被占用</div>
<div id="div3" style="visibility:visible;">DIV 3</div>
<div id="div4" style="visibility:hidden;">DIV 4</div>
<input type="button" οnclick="showAndHidden2();" value="DIV切换" />
</body>
</html>Related learning recommendations: html video tutorial
The above is the detailed content of How to control the display and hiding of elements in html. For more information, please follow other related articles on the PHP Chinese website!