手机
当前位置:查字典教程网 >网页设计 >XHTML >通过display或visibility来实现HTML元素的显示与隐藏
通过display或visibility来实现HTML元素的显示与隐藏
摘要:有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现。通过下面的例子...

有些时候我们需要根据某些条件来控制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" value="DIV切换" />

<hr>

<div>visibility:元素的位置仍被占用</div>

<div id="div3">DIV 3</div>

<div id="div4">DIV 4</div>

<input type="button" value="DIV切换" />

</body>

</html>

【通过display或visibility来实现HTML元素的显示与隐藏】相关文章:

通过label标记实现单选框点击文字也能选中

编写灵活、稳定、高质量的HTML和css代码规范指南

HTML元素的ID和Name属性的区别

浅谈HTML代码中的空格和空行

html option禁用选择 select禁用选项示例

创建新元素的三种方法小结

通过css控制HTML文本框中的文字垂直居中

html让局部强制出现滚动条不破坏整体的样式和布局

让网站在浏览器网址前面显示小图标的方法

HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

精品推荐
分类导航