任務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代碼