[工学]05 JaaScript控制外观样式.ppt

* * * * * 讲解要点： 我们上网时，一般是在IE浏览器中，键入某个网址：如，然后打开google网页， 引出浏览器对象。为了让学员容易理解，不要1求过去完整而枯燥的概念定义。 1）整个浏览器窗口，称为window窗口对象。 2）窗口对象又包括上方的地址栏和下方的页面内容。地址栏称为location地址对象，表示网页的地址信息。 3）下方的页面内容代表整个网页文档，称为document文档对象，存放网页的文档信息。 4）文档对象又包含段落、图片、表单等。例如表单对象FORM 5) 总结：从这张图可以看出，浏览器对象是分层次的. 所以表单中的文本框完整的名称应该是： window.document.myform.text1 ，其中window可以省略，所以我们前面写为： document.myform.text1 就是这样来的。 * * * * * * 讲解要点： 1）强调每个对象和我们前面学习的字符串对象、日期对象等一样， 只要是对象，都包含属性和方法，方法也就是该对象的一系列函数。 * * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的 document对象用例 2）提问：如何实现？。 3）引导：a) 利用document对象的背景色属性 b)鼠标悬停事件onMouseOver事件 4）讲解代码 * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的 document对象用例 2）提问：如何实现？。 3）引导：a) 利用document对象的背景色属性 b)鼠标悬停事件onMouseOver事件 4）讲解代码 * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的 document对象用例 2）提问：如何实现？。 3）引导：a) 利用document对象的背景色属性 b)鼠标悬停事件onMouseOver事件 4）讲解代码 * 讲解步骤： 1）先演示效果：参见TG9-Source文件夹中的 document对象用例 2）提问：如何实现？。 3）引导：a) 利用document对象的背景色属性 b)鼠标悬停事件onMouseOver事件 4）讲解代码 * script language=javascript function cgdiv(obj){ for(i=1;i=3;i++){ var td = document.getElementById(td+i); td.className = btn; var div = document.getElementById(div+i); div.style.display=none; } var td = document.getElementById(td+obj); td.className = btn2; var div = document.getElementById(div+obj); div.style.display=inline; } /script 设置激活的选项卡的样式和 所对应的div的样式 设置所有的选项卡为初始状态， 所有div为隐藏 style .btn{background-image:url(btn.gif); width:75px;text-align:center;} .btn2{ackground-image:url(btn2.gif);width:75px;text-align:center;} /style 选项卡 * 菜单栏 标题栏 选项栏 * TABLE width=160 cellspacing=0 cellpadding=0 border=0 TR class=m onclick=changetd(ctd1) TD科 幻/TD /TR TR TD class=distd id=ctd1 TABLE width=100% height=100% cellspacing=0 cellpadding=0 border=0 TRTD class=n onmouseover=this.className=cgbar onmouseout=this.className=n黑衣人/TD/TR TRTD class=n onmouseover=this.className=cgbar onmouseout=this.className=n地狱神探/TD/TR TRTD class=n onmouseover=this.className=cgbar onmouseout=this.className=n终结者/TD/TR TRTD class=n onmouseov