<!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>