原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
四川托普信息技术职业学院
计算系
实训报告
姓名学号班级成绩
学习情景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改变按钮背景图片效果
实现思路及步骤
（1）为按钮添加事件onmouseover和onmouseout，
（2）在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改变图片边框效果
实现思路及步骤
（1）设置每幅图片的样式为类选择器“out”，并添加onmouseover和onmouseout
事件。
（2）在每幅图片的onmouseover事件中更改图片的样式为“over”，在onmouseout
事件中恢复图片的样式为“out”，关键代码如下所示。
outover
“”和“”样式参考代码如下所示。
.out{border:solid1px#eeeeee;}
.over{border:solid2px#F60;}
实训3制作带关闭按钮的滚动广告。
训练要点
（1）使用getElementById()获得层对象。
（2）使用currentStyle或getComputedStyle()获得层的位置
（3）使用display属性隐藏层
（4）
文档评论（0）