任务视频V2.0

任务视频V1.0

知识点

Style属性

在HTML DOM中，style是一个对象，代表一个单独的样式声明，可从应用样式的文档或元素访问style对象，使用style属性改变样式的语法如下：

        HTML元素.style.样式属性=“值”;

ClassName属性

在HTML DOM中，className属性可设置或返回元素的class样式，语法如下：

       HTML元素.className="类样式名"

教学课件V2.0

教学课件V1.0

使用JavaScript动态改变导航菜单样式

任务描述

制作贵美网站的导航部分，使用style属性或className属性动态改变菜单样式，要求如下。

•  默认情况下，“首页”、“家用电器”等文本的背景图片为bg1.jpg，字体大小为14px，加粗显示，字体颜色为白色。

• 当鼠标指针移到“首页”等文本区域上时，背景图片为bg2.jpg，字体颜色为黑色，字体大小为15px，加粗显示。

• 当鼠标指针移出文本区域时，文本显示样式与默认情况下相同。

任务分析

• 定义导航菜单的鼠标移入时的样式和鼠标移出时的样式；

• 使用style属性或className属性设置样式

任务实现

• 使用style属性实现

<scripttype="text/javascript">

varlen=document.getElementsByTagName("li");

for(var i=0;i<len.length;i++){

        len[i].onmouseover=function(){

                this.style.backgroundImage="url(images/bg2.jpg)";

                this.style.color="#000000";

                this.style.fontSize="15px";

                }

        len[i].onmouseout=function(){

                this.style.backgroundImage="url(images/bg1.jpg)";

                this.style.color="#ffffff";

                this.style.fontSize="14px";

                }     

        }

</script>

• 使用className实现

......

.bg{

   background-image: url(images/bg1.jpg);

        }

.change{

        background-image:url(images/bg2.jpg);

        font-size:15px;

        color:#000000;

        font-weight:bold;

        }

......

<scripttype="text/javascript">

varlen=document.getElementsByTagName("li");

for(var i=0;i<len.length;i++){

        len[i].onmouseover=function(){

                this.className="change";

                }

        len[i].onmouseout=function(){

                this.className="bg";

                }     

        }

</script>

根据所提供素材完成练习。页面初始运行效果如下左图所示。当鼠标移到“现在就注册”按钮时的页面效果如右图所示。

参考答案