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

上机5 JavaScript与CSS样式特效 回顾 样式表的常用属性有哪些？ 如何获取页面的所有样式表？ 上机任务 修改页面背景颜色 修改超链接现有样式 放大/缩小文字 显示/隐藏div 训练技能点 掌握stylesheets属性的使用。 掌握stylesheet对象方法的使用。 掌握元素style属性的使用。 任务1 任务说明 页面加载时呈现#ABCDEF的背景色，点击页面按钮时更换页面背景为白色。 任务1 掌握要点 stylesheets属性的使用。 stylesheet对象方法的使用。 实现思路 设置页面默认背景色样式。 获取当前页面的stylesheet对象。 修改stylesheet对象的样式内容。 任务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 作业 * * JavaScript与网页特效制作 效果演示 function changeColor() { var steet = document.styleSheets[0];//获取样式表对象 if (steet) { steet.removeRule(0);//移除原有样式 //增加新样式 steet.innerHTML = body {background : #FFFFFF}; } } 共性问题讲解、规范代码展示 效果演示 共性问题讲解、规范代码展示 效果演示 var size = 20; function changeStyle(state) { var a1 = document.getElementById(link1); if (state === up) { size+=5; a1.style.font = size + pk; } else { size-=5; a1.style.font = size + pk; } } 共性问题讲解、规范代码展示 效果演示 本次上机总结