Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)delv
published in(发表于) 2013/12/31 6:39:01
使用javascript来编写动态Html_JavaScript技术_编程技术

使用javascript来编写动态Html_JavaScript技术_编程技术-你的首页-uuhomepage.com





  现在我们开始使用javascript来编写动态Html,javascript是一种脚本语言,使用起来就象是在编写程序一样。实际上,我们只要在Html文件中加入标志对,便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换,也能得到同样的效果。请看下边的例子。

例 使用鼠标触发事件和动态样式表改变文本






DHtml举例6





我是变色龙!






  例中在标志对中定义了函数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











  本例中的特别之处在于蓝色字部分。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来,不怕做不到,就怕想不到。











If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759