| 标题 | 通过display或visibility来隐藏html元素 |
| 内容 | 有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 代码如下: <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">DIV 1</div> <div id="div2">DIV 2</div> <input type="button" onclick="showAndHidden1();" value="DIV切换" /> <hr> <div>visibility：元素的位置仍被占用</div> <div id="div3">DIV 3</div> <div id="div4">DIV 4</div> <input type="button" onclick="showAndHidden2();" value="DIV切换" /> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。