![ASP.NET动态网站设计任务教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/757/31729757/b_31729757.jpg)
上QQ阅读APP看书,第一时间看更新
任务2-7 图形菜单外观的动态设置
需求:
根据文本长度,动态设置菜单标题文本、图像及其高度。
分析:
改造单元一的任务1-9,添加各部分id属性,使之能用JavaScript脚本设置菜单标题文本、图像及其高度。
实现:
第一步,新建文件夹07,复制任务1-9中的页面。
第二步,添加各部分id属性,并去掉标题文本、背景图像的样式属性设置,形成清单2-17所示的界面源代码。
清单2-17 菜单界面源代码
![](https://epubservercos.yuewen.com/09F237/17180253904508906/epubprivate/OEBPS/Images/img00044001.jpg?sign=1739116557-UeaPnrTrJUock8oLlUvuAjGBLlwr9XKQ-0-4ef32a6bae15d7b468fe2b95ba8a4f1b)
第三步,编写动态设置菜单标题文本与背景图像JavaScript脚本,代码如清单2-18所示。
清单2-18 动态设置菜单标题文本与背景图像
![](https://epubservercos.yuewen.com/09F237/17180253904508906/epubprivate/OEBPS/Images/img00044002.jpg?sign=1739116557-yI5soPhnVT732foeUNfR3br0btBDqetz-0-09cd756cd74a402cb6a8f5f33074a0e4)
![](https://epubservercos.yuewen.com/09F237/17180253904508906/epubprivate/OEBPS/Images/img00045001.jpg?sign=1739116557-cEWNV2FUVr3OP3TwIiPiRptTmH1CrGA8-0-96d4e8563b85978ca75ef2dc5e6602db)
说明
访问标签的全局脚本应放在标签加载后,否则会出现对象为空的异常。
语句var activeFolder="../images/menu_active/"表示images文件夹是当前页面文件父目录的同级目录。
用new Aarry()可以创建一个数组实例,简化编程。数组下标从0开始,数组大小可以暂不固定。
使用with关键字可以减少对较长的对象表达式的重复使用,使程序更加清晰。