JavaScript -- 节点操作， 事件触发， 表单伸缩 

<!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 changeSize(size)
{
	var divid = document.getElementById("newsid");
	divid.style.fontSize = size;
}

function changeClass(classname)
{
	var divid = document.getElementById("newsid");
	divid.className = classname;
	
}

function showlist()
{
/*
	获取事件源对象的两种方式
	1. 通过event.srcElement
	2. 将事件通过this传入
*/
	var dtNode = event.srcElement; 
	var dlNode = dtNode.parentNode;
	
	if(dlNode.className=="open")
	{
		dlNode.className = "close";
	}
	else
	{
		dlNode.className="open";
	}	
}

function showlist2(srcElement)
{
/*
	获取事件源对象的两种方式
	1. 通过event.srcElement
	2. 将事件通过this传入
*/
	var dtNode = srcElement;
	var dlNode = dtNode.parentNode;
	
	if(dlNode.className=="open")
	{
		dlNode.className = "close";
	}
	else
	{
		dlNode.className="open";
	}	
}

</script>

<style type="text/css" >
.max{
	background-color:#999900;
	color:#003399;
	font-size:36px;
}

.mid{
	background-color:#000000;
	color:#FFFFFF;
	font-size:24px;
}

.min{
	background-color:#000099;
	color:#FFFFFF;
	font-size:12px;
}

.close{
	overflow:hidden;
}

.open{;
	overflow:visible;
	height:80px;
}

dl{	
	overflow:hidden;
	height:16px;
}

</style>

</head>

<body>

<h2>新闻标题</h2>
<a href="javascript:void(0)" onclick="changeClass('max')">大</a>
<a href="javascript:void(0)" onclick="changeClass('mid')">中</a>
<a href="javascript:void(0)" onclick="changeClass('min')">小</a> <br/>

<div id="newsid" class="mid">
新闻内容 新闻内容 新闻内容 <br/> 
新闻内容 新闻内容 新闻内容 <br/> 
新闻内容 新闻内容 新闻内容 <br/> 
新闻内容 新闻内容 新闻内容 <br/> 
新闻内容 新闻内容 新闻内容 <br/> 
</div>

<dl>
	<dt onclick="showlist()">上层项目1
		<dd>子项目11</dd>
		<dd>子项目12</dd>
		<dd>子项目13</dd>	
	</dt>
</dl>

<dl>
	<dt onclick="showlist2(this)">上层项目2
		<dd>子项目21</dd>
		<dd>子项目22</dd>
		<dd>子项目23</dd>
	</dt>
</dl>

</body>
</html>

posted @ 2013-11-27 23:19  今晚打酱油_  阅读(126)  评论(0)  编辑  收藏  举报