js操作span标签属性:span隐藏与显示属性

发布时间:2019-07-19编辑:脚本学堂
有关js操作span标签属性的方法示例,js为span标签设置显示或隐藏属性,掌握下js操作span的方法。

js设置span标签属性的隐藏与显示

1、test.html

代码:
 

复制代码 代码示例:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<script language="javascript" src="js/menu.js"></script>
</head>
<body>
<table>
<tr>
<td>
<form method="post" action="#">
查询类型<select id="selectType" name="selectType" onchange="isChang1(this.value)">
<option value="yxsh">按院系</option>
<option value="zgh">职工号</option>
<option value="xm">姓名</option>
</select>
<span id="yxsh" style=display:>院系
<select id="depart" name="depart">
<option value="all">所有院系</option>
<option value="123">123</option>
<option value="123">123</option>
<option value="123">123</option>
<option value="123">123</option>
<option value="123">123</option>
</select>
课程分配
<select id="isAll" name="isAll">
<option value="all">所有</option>
<option value="NO">未分配</option>
<option value="YES">已分配</option>
</select>
</span>
<span id="key" style=display:none>
<input type="text" name="keyword" id="keyword"/>
</span>
<input type="submit" value="查询"/>
</form>
 </BODY>
</HTML>

2、js/Menu.js

代码:
 

复制代码 代码示例:
//这是用了自定义的方法hideElement()和shwoElement()
function isChang(values)
{
if(values=="yxsh"){
hideElement("key");
showElement("yxsh");
}else{
hideElement("yxsh");
showElement("key");
}
}
 
//自定义方法hideElement()
function hideElement(id){
document.getElementById(id).style.display="none";
}
 
//自定义方法showElement()
function showElement(id){
document.getElementById(id).style.display="";
}
 
//这是不用自定义函数直接设置是否隐藏
function isChang1(values)
{
if(values=="yxsh"){
document.getElementById("yxsh").style.display="";
document.getElementById("key").style.display="none";
}else{
document.getElementById("yxsh").style.display="none";
document.getElementById("key").style.display="";
}
}

测试结果:

其默认选择是:按院系

这是如果我们选择的是:不按院系,即按:职工号或姓名,那么,

这时就会隐藏:
 

<span id="yxsh" style=display:none>...</span>
并且<span id="key" style=display:>...</span>

如果选择:按院系,即默认情况下
那么,结果是:
 

<span id="yxsh" style=display:>...</span>
并且<span id="key" style=display:none>...</span>