您的位置：首页 > Web前端 > JavaScript

JavaScript 隐藏控件（用于交换）

2011-11-20 02:11 253 查看
我看到网上这个隐藏控件有2种：一种就是我接下来要写的“display”，还有一种是“visibility”，这里就不说明"visibility"，因为在项目中，为了弹框中的iframe好看，就使用的第一种方式。

当然还可以通过js的innerBefore的方式添加节点，将html的内容写到js中，触发事件的时候添加到程序中，其实这种比较好，效率会比较高，原因如下：

我们这里改变的是style中的样式的值（相当于改变css的属性值），使用的getElementById的方法，这个方法是有缺陷的，个人推荐少用，因为在使用它的时候，它的查找方式是每一次调用都会遍历所有的node，这样加载速度就会很慢，所以在要使用多次获取id的时候不推荐使用。

首先，我们使用的核心是：display:none和display:block的变换，具体实例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script type="text/javascript">
function change() {
if(name1.style.display=="block"){
name1.style.display="none";
}
else{
name1.style.display="block";
}
}
</script>
</head>

<body>
<table>
<tr>
<td align="right"><font style="font-size: 16px;">级别</font></td>
<td>
<input type="checkbox" onclick="change();" />
</td>
</tr>
<tr id="name1" style="display:none;">
<td align="right"><font style="font-size: 16px;">名称1</font></td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right"><font style="font-size: 16px;">名称2</font></td>
<td>
<input id="name2" type="text" />
</td>
</tr>
</table>
</body>
</html>


代码说明：就是在单选框选择的时候，将“名称1”的display属性变成"block"然他显示出来。

（如果读者还有其他方法的例子，请贴给我，谢谢。）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航