任务1-3　JavaScript实现动态改变样式文件

【任务描述】

网页0103.html的底部内容如图1-4所示，单击超链接“应用CSS样式1”时网页引用外部样式文件style1.css，单击超链接“应用CSS样式2”时网页引用外部样式文件style2.css。编写代码实现此功能。

图1-4　网页0103.html的底部内容

【思路探析】

（1）编写引用外部样式文件的代码，且设置其id为"cssfile"，完整代码如下所示。

<link href="css/style1.css"type="text/css"rel="stylesheet"id="cssfile"/>

（2）使用document.getElementById("id")方法，根据指定的id，获取HTML元素。

（3）使用HTML元素的href属性改变引用的外部文件。

【特效实现】

外部样式文件style1.css的主要代码如表1-4所示。

表1-4　外部样式文件style1.css的主要代码

外部样式文件style2.css的主要代码如表1-5所示。

表1-5　外部样式文件style2.css的主要代码

实现动态改变样式的JavaScript代码如表1-6所示。

表1-6　实现动态改变样式的JavaScript代码

网页0103.html底部对应的HTML代码如表1-7所示。

表1-7　网页0103.html底部对应的HTML代码