用JavaScript来编写动态Html详细介绍

时间:2010-04-04 13:45:33  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读: 例 使用鼠标触发事件和动态样式表改变文本 DHtml举例6 我是变色龙!   例中在标志对中定义了函数change_text(),当此函数被调用时,它将对对象Dragon的style属性中的color属性进行判断,若其颜色值等于...
  正文: 现在我们开始使用JavaScript来编写动态Html,JavaScript是一种脚本语言,使用起来就象是在编写程序一样。实际上,我们只要在Html文件中加入标志对,便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换,也能得到同样的效果。请看下边的例子。 例 使用鼠标触发事件和动态样式表改变文本 DHtml举例6

SEOver="change_text()" onmouseout="change_text()">我是变色龙!

  例中在标志对中定义了函数change_text(),当此函数被调用时,它将对对象Dragon的style属性中的color属性进行判断,若其颜色值等于“Red”,则将其color值变为“Green”(document.all.Dragon.style.color="Green"的作用),否则将其color值变为“Red”(document.all.Dragon.style.color="Red"的作用)。而对change_text()函数的调用是在

标志对中进行的,id="Dragon"定义了

标志对的对象名为Dragon,onmouseover和onmouseout都调用了change_text()函数,因此只要onmouseover或onmouseout事件触发,都会执行change_text()函数,于是便改变了Dragon的属性,即当鼠标移动到或离开文本“我是变色龙”时,此文本的颜色将在红色(Red)和绿色(Green)之间变换。Document指代的是上例自身这个Html文档,all指代的是此Html文档的全部对象。   现在看起来要使网页动起来已经变得简单多了。细心的读者会发现例6的局限性,因为change_text()函数只能对Dragon对象进行颜色变换,若您想对一系列对象的文本(如列表中的每一行文本)进行颜色变换将会使代码增加。不用担心,我们马上解决。为了让change_text()函数更具有通用性,我把Css样式单与JavaScript相结合,这将更加简单而且方便。 例 CSS样式单与JavaScript相结合改变文本 DHtml举例7

我是变色龙!

我是变色鸟!

我是变色兔!

  从上例中可以看到,我在CSS样式单中定义了red和blue两个样式类,然后在change_text()函数中对调用该函数的对象进行样式类的改变,从而达到颜色的变换,关键语句在于window.event.srcElement.className="样式类名",此语句能使当前调用函数的对象的className属性改变,若class="red",当调用change_text()函数时,其className="blue",它的样式类也就变成了“blue”。   也许您会因为要对每一行文本增加onmouseover和onmouseout事件而觉得麻烦,不要紧,我马上来搞定这个麻烦问题。下边是一个效果不错的DHtml,请仔细阅读。 例 对列表进行动态变换 DHtml举例8
  • 动态Html(DHtml)
  • JavaScript
  • vbScript
  • 动态服务器页面(ASP/ target=_blank class=infotextkey>asp)
  • FrontPage98
  • InternetExplorer
  • SQL Server
  本例中的特别之处在于蓝色字部分。CSS样式单首先定义了标志对的样式(body {font-family:"宋体";font-size:9pt}),然后定义了另外两个样式类“first”和“later”,first类中的文本修饰是none,既没有修饰,而later的文本修饰是underline,及下加一条直线,并且,later类中还出现了cursor属性,其值为hand,即是网页中鼠标移到超级链结是出现的小手。除了小手外,cursor还可以取其它的值:default、hand、move、crosshair、text、wait、help、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、e-resize和ne-resize等。   注意到语句 document.onmouseover=change_text;和document.onmouseout=change_text;只就是我们解决上边提到的问题的关键语句,它们代替了Html文档中所有的onmouseover和onmouseout事件。   您大可以自己设计出更好看、更动感的DHtml来,不怕做不到,就怕想不到。
用JavaScript来编写动态Html详细介绍》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13460.html


关键字:

关于《用JavaScript来编写动态Html详细介绍》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td