JavaScript 隐藏控件（用于交换）

最新推荐文章于 2022-05-25 16:56:36 发布

小撸007

最新推荐文章于 2022-05-25 16:56:36 发布

阅读量701

点赞数

分类专栏： J2EE 文章标签： javascript xhtml html iframe 文档 css

本文链接：https://blog.csdn.net/metroui/article/details/6992324

版权

J2EE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我看到网上这个隐藏控件有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" οnclick="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"然他显示出来。

（如果读者还有其他方法的例子，请贴给我，谢谢。）