第五章 JavaScript和 与样式表 JavaScript及网页特效制作课件 上机部分.pptVIP

上机5 JavaScript与CSS样式特效 回顾 样式表的常用属性有哪些？ 如何获取页面的所有样式表？ 上机任务 修改页面背景颜色 修改超链接现有样式 放大/缩小文字 显示/隐藏div 训练技能点 掌握stylesheets属性的使用。 掌握stylesheet对象方法的使用。 掌握元素style属性的使用。 任务说明 页面加载时呈现#ABCDEF的背景色，点击页面按钮时更换页面背景为白色。 任务1 效果演示 任务2 任务说明 页面包含一个A标签，具有鼠标悬停时字体扩大至30px的样式属性，现修改为鼠标悬停时扩大至50px。 效果演示 任务2 实现思路 使用stylesheets属性取出当前a标签样式 使用removeRule(index)移除原有悬停样式。 使用addRule(selector, rule, index)添加新样式。 var steet = document.styleSheets[0]; steet.removeRule(1); steet.addRule(a:hover, font:50px;color:blue;, 1); 阶段2 共性问题讲解、规范代码展示 任务3 任务说明 页面包含一个超链接，两个按钮(显示的文本值分别为放大及缩小)，点击按钮时对超链接文本进行放大或缩小。 效果演示 任务3 掌握要点 元素style属性的使用。 实现思路 获取当前超链接对象的style属性。 判断点击的按钮是放大还是缩小。 增加或减少style.font的值。 任务3 参考代码 共性问题讲解、规范代码展示 任务4 任务说明 页面上有两个div，底色分别为黄色及蓝色，初始化页面时只显示黄色div，点击div时隐藏自己，显示另外一个div。 效果演示 任务4 本次上机总结 作业