手机
当前位置:查字典教程网 >网页设计 >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元素】相关文章:

使用语义化标签去写你的HTML 兼容IE6,7,8

文字滚动后自动停止效果示例

HTML表格标记教程(29):单元格的亮边框色属性BORDERCOLORLIGHT

base target=""控制链接的目标打开框架

了解html页面的渲染过程以备学习前端的性能优化(续)

【HTML 元素】标记文字详解

html入门教程 html标记符号快速掌握

HTML元素设置焦点的方法

如何通过W3C验证?

网页布局设计的简单原则

精品推荐
分类导航