以下为《第6章 JavaScript与CSS交互-实训报告》的无排版文字预览，完整格式请下载

下载前请仔细阅读文字预览以及下方图片预览。图片预览是什么样的，下载的文档就是什么样的。

广东科学技术***

计算机工程***(***)

实训报告

编制人：

姓 名



学 号



班级



成绩





学习情景编号

06

学习情景名称

JavaScript与CSS交互

学时

2



实验目的与及要求

实训任务

1. 掌握css样式在JavaScript中的应用

2. 掌握className属性的应用

3. 掌握JavaScript中应用CSS样式时的常用事件的应用

4. 熟悉鼠标指针坐标的获取方法

训练技能点

（1）使用onmouseover和onmouseout事件。

（2）使用className属性。

（3）使用getElementById()获得层对象。

（4）使用currentStyle或getComputedStyle()获得层的位置

（5）使用display属性隐藏层

（6）使用scrollTop获取滚动条滚动的距离



实训任务和步骤

实训1.改变按钮背景图片。

训练要点

（1）使用onmouseover和onmouseout事件。

（2）使用className属性。

需求说明

页面初始运行效果如图1所示。当鼠标移到“现在就注册”按钮时的页面效果如图2所示。

图1初始运行效果图 图2 改变按钮背景图片效果

实现思路及步骤

为按钮添加事件onmouseover和onmouseout，

在onmouseover事件中更改按钮样式为“mouseOverStyle”，在onmouseout事件中恢复按钮的样式为“mouseOutStyle”。

mouseOverStyle和mouseOutStyle样式参考代码如下所示。

.mouseOverStyle{

background-image: url(images/btn_over.gif);

color:#CC0099;

border:0px;

margin:0px;

padding:0px;

height:35px;

width: 130px;

font-size: 13px;

}

.mouseOutStyle{

background-image: url(images/btn_out.gif);

color:#0000FF;

border:0px;

margin:0px;

padding:0px;

height:35px;

width: 130px;

font-size: 13px;

}

实训2 改变图片边框样式。

训练要点

（1）使用onmouseover和onmouseout事件。

（2）使用className属性。

需求说明

页面初始运行效果如图3 所示。当鼠标移到图片时的页面效果如图4所示。

图3初始运行效果图 图4 改变图片边框效果

实现思路及步骤

设置每幅图片的样式为类选择器“out”，并添加onmouseover和onmouseout事件。

在每幅图片的onmouseover事件中更改图片的样式为“over”，在onmouseout事件中恢复图片的样式为“out”，关键代码如下所示。

“out”和“over”样式参考代码如下所示。

.out{border:solid 1px #eeeeee;}

.over{border:solid 2px #F60;}

实训3. 树形菜单效果

训练要点

（1）学会使用style或className属性改变元素样式

（2）掌 内容过长，仅展示头部和尾部部分文字预览，全文请查看图片预览。 ace()，当滚动条滚动时调用函数roll()。

实训6制作回到顶部效果

训练要点

（1）使用getElementById()获得层对象。

（2）使用scrollLeft、scrollTop获取滚动条滚动的距离

（3）学会编写浏览器兼容性代码

需求说明

根据所给素材，实现回到顶部效果。打开页面，当用户向下滚动一定距离时，将鼠标移到右下角灰色的“小火箭”图标上，图标完全显示，单击图标时，滚动条能回到页面顶部，如图下图所示。



实训结果记录



实训小结





注：1、学生实验前填好实验报告的第二、三栏，并将其提交给教师。

2、学生实验后要提交与实验相关的各种源代码。

[文章尾部最后300字内容到此结束,中间部分内容请查看底下的图片预览]

以上为《第6章 JavaScript与CSS交互-实训报告》的无排版文字预览，完整格式请下载

下载前请仔细阅读上面文字预览以及下方图片预览。图片预览是什么样的，下载的文档就是什么样的。