JavaScript -- 节点操作, 事件触发, 表单伸缩
2013-11-27 23:19
513 查看
<!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>
相关文章推荐
- JavaScript -- 节点操作, 事件触发, 表单伸缩
- JavaScript禁止没有回车事件的input触发submit提交表单事件,已有回车触发事件的input不受影响
- 黑马程序员_学习日记63_710jQuery2(属性选择器、表单选择器、操作Dom节点、事件、动画)
- javascript阻止浏览器后退事件防止误操作清空表单
- javascript阻止浏览器后退事件防止误操作清空表单
- JavaScript节点操作DOMDocument属性和方法
- 使用JavaScript操作表单
- javascript学习3---Js表单操作
- JavaScript 模拟事件触发
- [JavaScript] 10.JS 表单操作
- JavaScript之事件操作
- 解决IE下javascript:void(0)会触发window.onbeforeunload事件
- javascript 触发事件列表
- Javascript DOM 的节点操作示例
- javascript触发input:file的选择事件及只触发一次的解决
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-表单事件
- javascript节点操作DOMDocument属性和方法(转载)
- JavaScript 触发事件列表
- javascript基础。表单操作
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)